71 lines
1.8 KiB
Markdown
71 lines
1.8 KiB
Markdown
---
|
|
name: lottie
|
|
description: Embedding Lottie animations in Remotion.
|
|
metadata:
|
|
category: Animation
|
|
---
|
|
|
|
# Using Lottie Animations in Remotion
|
|
|
|
## Prerequisites
|
|
|
|
First, the @remotion/lottie package needs to be installed.
|
|
If it is not, use the following command:
|
|
|
|
```bash
|
|
npx remotion add @remotion/lottie # If project uses npm
|
|
bunx remotion add @remotion/lottie # If project uses bun
|
|
yarn remotion add @remotion/lottie # If project uses yarn
|
|
pnpm exec remotion add @remotion/lottie # If project uses pnpm
|
|
```
|
|
|
|
## Displaying a Lottie file
|
|
|
|
To import a Lottie animation:
|
|
|
|
- Fetch the Lottie asset
|
|
- Wrap the loading process in `delayRender()` and `continueRender()`
|
|
- Save the animation data in a state
|
|
- Render the Lottie animation using the `Lottie` component from the `@remotion/lottie` package
|
|
|
|
```tsx
|
|
import { Lottie, LottieAnimationData } from "@remotion/lottie";
|
|
import { useEffect, useState } from "react";
|
|
import { cancelRender, continueRender, delayRender } from "remotion";
|
|
|
|
export const MyAnimation = () => {
|
|
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} />;
|
|
};
|
|
```
|
|
|
|
## Styling and animating
|
|
|
|
Lottie supports the `style` prop to allow styles and animations:
|
|
|
|
```tsx
|
|
return (
|
|
<Lottie animationData={animationData} style={{ width: 400, height: 400 }} />
|
|
);
|
|
```
|