Loading Lottie animations from staticFile()

In order to load a Lottie animation from a file that has been put into the public/ folder, use staticFile() in combination with fetch and Remotion's delayRender() function.

Use the LottieAnimationData type to keep a state using React's useState() and only render the <Lottie> component once the data has been fetched.

Animation.tsx
tsx
import { continueRender, delayRender, staticFile } from "remotion";
import { useEffect, useState } from "react";
import { Lottie, LottieAnimationData } from "@remotion/lottie";
 
const Square = () => {
  const [handle] = useState(() => delayRender("Loading Lottie animation"));
 
  const [animationData, setAnimationData] =
    useState<LottieAnimationData | null>(null);
 
  useEffect(() => {
    fetch(staticFile("data.json"))
      .then((data) => data.json())
      .then((json) => {
        setAnimationData(json);
        continueRender(handle);
      })
      .catch((err) => {
        console.log("Animation failed to load", err);
      });
  }, [handle]);
 
  if (!animationData) {
    return null;
  }
 
  return <Lottie animationData={animationData} />;
};

Animation.tsx
tsx
import { continueRender, delayRender, staticFile } from "remotion";
import { useEffect, useState } from "react";
import { Lottie, LottieAnimationData } from "@remotion/lottie";
 
const Square = () => {
  const [handle] = useState(() => delayRender("Loading Lottie animation"));
 
  const [animationData, setAnimationData] =
    useState<LottieAnimationData | null>(null);
 
  useEffect(() => {
    fetch(staticFile("data.json"))
      .then((data) => data.json())
      .then((json) => {
        setAnimationData(json);
        continueRender(handle);
      })
      .catch((err) => {
        console.log("Animation failed to load", err);
      });
  }, [handle]);
 
  if (!animationData) {
    return null;
  }
 
  return <Lottie animationData={animationData} />;
};

See also​

See also