1---
2name: lottie
3description: Embedding Lottie animations in Remotion.
4metadata:
5  category: Animation
6---
7 
8# Using Lottie Animations in Remotion
9 
10## Prerequisites
11 
12First, the @remotion/lottie package needs to be installed.  
13If it is not, use the following command:
14 
15```bash
16npx remotion add @remotion/lottie # If project uses npm
17bunx remotion add @remotion/lottie # If project uses bun
18yarn remotion add @remotion/lottie # If project uses yarn
19pnpm exec remotion add @remotion/lottie # If project uses pnpm
20```
21 
22## Displaying a Lottie file
23 
24To import a Lottie animation:
25 
26- Fetch the Lottie asset
27- Wrap the loading process in `delayRender()` and `continueRender()`
28- Save the animation data in a state
29- Render the Lottie animation using the `Lottie` component from the `@remotion/lottie` package
30 
31```tsx
32import { Lottie, LottieAnimationData } from "@remotion/lottie";
33import { useEffect, useState } from "react";
34import { cancelRender, continueRender, delayRender } from "remotion";
35 
36export const MyAnimation = () => {
37  const [handle] = useState(() => delayRender("Loading Lottie animation"));
38 
39  const [animationData, setAnimationData] =
40    useState<LottieAnimationData | null>(null);
41 
42  useEffect(() => {
43    fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json")
44      .then((data) => data.json())
45      .then((json) => {
46        setAnimationData(json);
47        continueRender(handle);
48      })
49      .catch((err) => {
50        cancelRender(err);
51      });
52  }, [handle]);
53 
54  if (!animationData) {
55    return null;
56  }
57 
58  return <Lottie animationData={animationData} />;
59};
60```
61 
62## Styling and animating
63 
64Lottie supports the `style` prop to allow styles and animations:
65 
66```tsx
67return (
68  <Lottie animationData={animationData} style={{ width: 400, height: 400 }} />
69);
70```
71