@remotion/lottie
This package provides a component for displaying Lottie animations in Remotion.
Installation
Install, @remotion/lottie
as well as lottie-web
.
- npm
- yarn
- pnpm
bash
npm i @remotion/lottie lottie-web
bash
npm i @remotion/lottie lottie-web
bash
yarn add @remotion/lottie lottie-web
bash
yarn add @remotion/lottie lottie-web
bash
pnpm i @remotion/lottie lottie-web
bash
pnpm i @remotion/lottie lottie-web
You can now start using the <Lottie>
component in your Remotion project.
Supported features
- Playing Lottie animations using
lottie-web
- Change the speed of the animation
- Playing animation forwards and backwards
- Playing remote files
- Determining dimensions and duration of a Lottie animation
Unsupported features
- Rendering on other renderers as
svg
setSubFrame()
,setLocationHref()
- Limited expression support: Remotion uses the
.goToAndStop()
method fromlottie-web
to seek through the Lottie file. Depending on the expression, the frame might not render deterministally, leading to flickering in the Remotion output. Remotion cannot fix this without a change inlottie-web
upstream. You need to evaluate on a case-by-case basis whether the expression you are using is supported by Remotion.
note
Open an issue if you want to request a currently unsupported feature.