Skip to main content

@remotion/lottie

This package provides a component for displaying Lottie animations in Remotion.

Installation​

Install, @remotion/lottie as well as lottie-web.

bash
npm i @remotion/lottie lottie-web
bash
npm 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 from lottie-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 in lottie-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.

Table of contents​

License​

Remotion License