Skip to main content

@remotion/lottie

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import {TableOfContents} from "../../components/TableOfContents/lottie"

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

Installation​

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

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: '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 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