felippenardi/lottie-react-web

Lottie Wrapper for React on the web.

Lottie for React, React Native, iOS, and Android

Lottie component for React with runtime animation control.

Introduction

Lottie is a library for the Web, Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on each platform!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

This library is a react-lottie fork that adds the capability for runtime animation control and fixes lots of bugs.

Getting Started

Get started with Lottie by installing the node module with yarn or npm:

yarn add lottie-react-web

or

npm i --save lottie-react-web

Usage

<Lottie> component can be used in a declarative way:

import React from 'react';
import Lottie from 'lottie-react-web'
import animation from './animation.json'

const App = () => (
  <Lottie
    options={{
      animationData: animation
    }}
  />
)

export default App

By default it will automatically play the animation in loop.

Lottie's animation control can be set via props. Here is an example of a toggle animation that reacts on click:

import React, { Component } from 'react';
import Lottie from 'lottie-react-web'
import toggleAnimation from './toggleAnimation.json'

export default class App extends Component {
  this.state = { isToggled: false }

  render() (
    <div
      onClick={() => {
        this.setState(state => { isToggled: !state.isToggled})
      }}
    >
      <Lottie
        direction={this.state.isToggled ? 1 : -1}
        options={{
          animationData: toggleAnimation,
          loop: false,
        }}
      />
    </div>
  )
)

export default App

API

These are all props available:

Props

Prop	Description	Default
options	Mandatory - The object representing the animation settings that will be instantiated by bodymovin. Defines the source of animation (animationData), loop, autoplay, a few others. See details in the section below.	{ autoplay: true, loop: true }
animationControl	This is where you can change the animation at runtime. A key value pair of a After Effects property path and the a custom value to apply to it. See details below.	—
width	Sets the width of the animation container.	100%
height	Sets the heigth of the animation container.	100%
isStopped	A boolean flag indicating whether or not the animation is stopped.	false
isPaused	A boolean flag indicating whether or not the animation is paused.	false
speed	An integer indicating the speed of the animation ( 1 is 100%.)	1
segments	An array of two integers indicating the beginning and ending frame of the animation	Defaults to play entire animation
forceSegments	A boolean indicating wether the segments should play immediately or sequentially	false
direction	An integer indicating wether the animation progresses in the usual (1) or reverse (-1) direction	1
ariaRole	A string indicating the animation container ariaRole property	"button"
ariaLabel	A string indicating the animation container ariaLabel property	"animation"
title	A string indicating the animation container title property	""

Options object

Defines the animation settings that will be instantiated by bodymovin. Currently a subset of the bodymovin options are supported.

Either the animationData OR path must be specified.

Prop	Description	Default
animationData	Mandatory - The source of the animation.	—
path	Mandatory - The path to the animation.	—
assetsPath	Mandatory - The root path for external assets.	images
loop	Play animation non-stop in a loop.	true
autoplay	Automatically play animation when it is instantiated.	true
renderer	The method for rendering the animation.	svg
rendererSettings	Customize bodymovin aspect ratio configurations.	—

Changing animation at runtime

You can target an specific After Effects layer property and change it at runtime by passing setting a property object on the <Lottie> prop. Example:

import React from 'react';
import Lottie from 'lottie-react-web'
import animation from './animation.json'

const Animation = ({ x, y }) => (
  <Lottie
    options={{
      animationData: animation,
    }}
    animationControl={{
      'Square,Transform,Position': [x, y],
    }}
  />
)

export default Animation

This will override the Position value of the layer JoyStkCtrl01 at runtime.

Lottie is compatible with Joystick 'n Sliders After Effects plugin, so you can create amazing animations easily.

lottie-react-web's Issues

TypeError: Cannot read property 'finalTransform' of undefined

...when using animation json that contains raster images:

https://imgur.com/a/nQ1bEkk

The sample json works perfectly in the Lottie viewer:

https://lottiefiles.com/share/O8IXXn

I should note that switching to react-lottie (https://www.npmjs.com/package/react-lottie) ended up fixing the issue, but I'd prefer to use lottie-react-web since the general implementation as a React component seems to be better.

stop animation at start doesn't work

Hi there,

I've tried some animations in react-lottie-web but why does autoplay keep running animations? I have set it to false but the animation doesn't stop early, how do I stop the animation before starting the action?

Update NPM module with commit that modifies "this.stops()"

The NPM module still has this.stops() being called which was fixed in 20e907d

I'm assuming NPM just hasn't been updated.

Thanks!

AnimationControl - setting text to text layer

Hi. First of all thanks for providing a method to change running animations, exactly what I was looking for in react.

What I'm trying to do:
I would like to change the string of a text layer.

What happens:
Just nothing. No error. The animations isnt changing its text.

My code (the important snippets):

import Lottie from 'lottie-react-web';
import anim_CpuUsage from './animations/cpuUsage.json'

// stuff

render() {
    // ...
    <Lottie
        options={{
              loop: true,
              autoplay: true,
              animationData: anim_CpuUsage
            }}
            animationControl={{
              // My AfterEffects layer is called "Layer50"!


              'Layer50,Text,Source Text': "10"               
            }}
          />
   // ...
}

What I've tried:
I tried setting different property paths like

• 'Layer50,Text,Source Text': "10"
• 'Layer50,Text,SourceText': "10"
• 'Layer50,Text,Source_Text': "10"
• 'Layer50,Text,Source-Text': "10"
• 'Layer50,Text,Source': "10"
• 'Layer50,Text,Source,Text': "10"
• 'Text,Text,Source,Text': "10"
• 'Layer50,Transform,Position': [10, 10], // For troubleshooting, works! So its about text-layers only

Nothing works.

I would appreciate it if you could tell me the right declaration of a text layers text-property. I have attached my very basic animation (for testing purposes) if that helps in any way.
Thank you very much

animation.zip

Incorrect Import Breaks Builds

This import blows up our build system when we try to use this library. I don't think it should be pointing directly to the dist min file. Shouldn't it be:

import lottieApi from 'lottieApi';

lottie-react-web/src/index.js

Line 4 in 6deb338

import lottieApi from 'lottie-api/dist/lottie_api';

loop: false is not working when using segments

I want to play animation only once, but when I am sending loop false in options, my animation runs 3 times, Please fix it

React functional component request

Can you replace old componentDid will mount structures with new functional hooks.

Warning - componentWillUpdate has been renamed, and is not recommended for use

Hello @felippenardi

after using this library with React 17, I've got the warning:

componentWillUpdate has been renamed, and is not recommended for use

* Move data fetching code or side effects to componentDidUpdate.
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Lottie

Do you plan to fix it?
Thanks!

this package is not compatible with `type: module`

If you have a package that sets type: module, and that package imports this package you can get into a weird error state where this package seems to return a bad object. In our case, our chain was Vite --> ESBuild --> Emotion --> This package. We suspect it is this package because components that didn't rely on this rendered just fine. Components that did rely on this hit an error boundary that had the following:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I'm still debugging but this library seems to be the root cause/culprit.

As an aside, is this library still under active development @felippenardi? I'm concerned that this library is not compatible with the ever changing JS ecosystem going forward

Failed prop type: Invalid prop `style` of type `object` supplied to `Lottie`, expected `string`

It doesn't seem to work in any way if I pass the style prop as a string, but it works if I pass the style as an object. The expected proptype is string, though; am I missing something?

Animation restarts on component state update

I'm having a bit of a problem where anytime my component updates due to a state update that the lottie react component animation restarts. The problem happens when the segments property is set.

Install stuck on "resolveWithNewModule [email protected] checking installable status"

I'm trying to install the package with npm i --save lottie-react-web and it is getting stuck on step resolveWithNewModule [email protected] checking installable status. Any suggestions on how to install past this would be great! Really want to use in my application.

TypeError: Cannot set property 'fillStyle' of null

Getting this error for all the test cases when they try to mount the component using enzyme.
It shows error corresponding to the import line "import Lottie from 'lottie-react-web';"

Error:-
With :- import Lottie from 'lottie-react-web';
at ../../common/temp/node_modules/.office.pkgs.visualstudio.com/lottie-web/5.5.2/node_modules/lottie-web/build/player/lottie.js:4165:23
at ../../common/temp/node_modules/.office.pkgs.visualstudio.com/lottie-web/5.5.2/node_modules/lottie-web/build/player/lottie.js:4168:6
at ../../common/temp/node_modules/.office.pkgs.visualstudio.com/lottie-web/5.5.2/node_modules/lottie-web/build/player/lottie.js:4268:2
at ../../common/temp/node_modules/.office.pkgs.visualstudio.com/lottie-web/5.5.2/node_modules/lottie-web/build/player/lottie.js:7:26

prop-types should be listed as a peer dependency

lottie-react-web/package.json

Line 50 in bcebeaa

"react": "^0.14.7 || ^15.0.0 || ^16.0.0"

Under pnpm prop-types don't resolve normally. I need to force the resolution with

      "lottie-react-web": {
        "peerDependencies": {
          "prop-types": "*"
        }
      },

I believe if this package specifies it and publishes a new version, I won't have to do this. Filing here to see if you are open to me contributing a fix

"prop-types" is listed as devDependency but is always imported, resulting in runtime errors

This library's source code includes this line:

import PropTypes from "prop-types";

https://github.com/felippenardi/lottie-react-web/blob/bcebeaac478094776ca7396085ada4055ec95bad/src/index.js#LL2C32-L3C1

But "prop-types" is only listed as devDepenecy, which is not installed by default (we happen to use pnpm).

This causes a runtime error in the browser:
TypeError: Failed to resolve module specifier "prop-types". Relative references must start with either "/", "./", or "../".

The solution would be to either make the import conditional or to move propTypes to the production dependencies list (which will increase the size of this package even futher).

I'm happy to open a PR but this repository seems to be stale (3 years since last update). Will gladly submit a fix if the package maintainer says that it will be published. Otherwise, I'm opening this issue for posterity, in case other people encounter the same problem

Update readme, change forceSegment to forceSegments

Option forceSegment, as described in the readme, does nothing.
Option forceSegments does what is expected from forceSegment.

Uncaught TypeError: Cannot read property '0' of undefined

i have got error>> Uncaught TypeError: Cannot read property '0' of undefined

I have tried importing the json as :

import animationData from './animation.json';
import * as animationData from './animation.json';
const animationData = require('animation.json');

segments not working?

I am having issues with the segments- for me, displaying a custom set of segments does not seem to do anything. My code:

import React from 'react';
import animation from './animation.json';
import Lottie from 'lottie-react-web';

const Opening = () => {
  const options = {
    loop: true,
    autoplay: true,
    prerender: true,
    animationData: animation,
  };

  return (
    <React.Fragment>
      <Lottie options={options} segments={[0, 8]} />
    </React.Fragment>
  );
};

export default Opening;

package upgrade

Hey, npm indicates that a couple packages lottie-react-web relies on need to updated to fix security vulnerabilities.

"npm audit" indicates the issues are in lodash and minimatch.

set animationData error

function LayerComp() {
   const [animdata, setAnimdata] = useState(null);
    useEffect(() => {
       $.getJSON('https://h5ds-cdn.oss-cn-beijing.aliyuncs.com/other/lottie/data.json').done(res => {
                 setAnimdata(res);
       })
    }, [])

   return <>
     {animdata && (
        <Lottie
          options={{
            assetsPath: 'https://h5ds-cdn.oss-cn-beijing.aliyuncs.com/other/lottie/images',
            animationData: animdata,
            speed: 1, // 速度
            autoplay: true,
            renderer: 'svg',
            loop: true
          }}
        />)}
   </>
}

upgrade to react 17?

works fine for me :) let's bump the package.json accordingly? thanks!

Remove hard dependency on npm 3.x.x

When trying to use a recent version of npm the install fails with:

> npm install
npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Required: {"npm":"^3.0.0"}
npm ERR! notsup Actual:   {"npm":"7.5.3","node":"v15.9.0"}

using npm install --engine-strict false simply works.

It looks to me as if this is an old requirement that is not valid anymore.

The problem about addValueCallback

lottie-react-web/src/index.js

Line 93 in 6deb338

this.animApi.addValueCallback(propertyPath, () => value);

Should probably write like this

        this.animApi.addValueCallback(propertyPath, value);

Remove babel-runtime

I don't believe it's required and would help reduce the build size.