Chapter 893: Finding Lottie files to use

Core Idea

LottieFiles is a website where people can share and download Lottie files.

Key Concepts

• Import the file into Remotion
• See also

Code Examples

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

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

  useEffect(() => {
    fetch(staticFile('animation.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 Finding Lottie files to use from the official docs.

Key Takeaways

1. Understand import the file into remotion when working with Finding Lottie files to use.
2. Understand see also when working with Finding Lottie files to use.

Connects To

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