Chapter 895: Loading Lottie animations from staticFile()

Core Idea

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.

Key Concepts

• See also

Code Examples

import {
  cancelRender,
  continueRender,
  delayRender,
  staticFile,
} from "remotion";

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) => {
        cancelRender(err);
      });
  }, [handle]);

  if (!animationData) {
    return null;
  }

  return <Lottie animationData={animationData} />;
};

• What it demonstrates: Usage pattern for Loading Lottie animations from staticFile() from the official docs.

Key Takeaways

1. Understand see also when working with Loading Lottie animations from staticFile().

Connects To

• Getlottiemetadata: related page in the Lottie (@remotion/lottie) section.
• Lottie: related page in the Lottie (@remotion/lottie) section.
• Lottiefiles: related page in the Lottie (@remotion/lottie) section.