Chapter 894: Loading Lottie animations from a URL

Core Idea

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

Key Concepts

• See also

Code Examples

const Balloons = () => {
  const [handle] = useState(() => delayRender("Loading Lottie animation"));

  const [animationData, setAnimationData] =
    useState<LottieAnimationData | null>(null);

  useEffect(() => {
    fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.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 a URL from the official docs.

Key Takeaways

1. Understand see also when working with Loading Lottie animations from a URL.

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.