Lottie Animation View for React (Angular, Vue)

Demo

https://chenqingspring.github.io/react-lottie

Wapper of bodymovin.js

bodymovin is Adobe After Effects plugin for exporting animations as JSON, also it provide bodymovin.js for render them as svg/canvas/html.

Why Lottie?

Flexible After Effects features

We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll be adding new features on a regular basis.

Manipulate your animation any way you like

You can go forward, backward, and most importantly you can program your animation to respond to any interaction.

Small file sizes

Bundle vector animations within your app without having to worry about multiple dimensions or large file sizes. Alternatively, you can decouple animation files from your app’s code entirely by loading them from a JSON API.

Learn more › http://airbnb.design/lottie/

Looking for lottie files › https://www.lottiefiles.com/

Installation

npm install --save react-lottie

or

yarn add react-lottie

Usage

import React from 'react'
import Lottie from 'react-lottie';
import * as animationData from './data.json'

export default () => <Lottie animationData={pinJump} />

Download example data.json file from Lottie Files

View Storybook Examples for Additional Usage

Storybook demo files are located in stories directory.

Props

The <Lottie /> Component supports the following properties:

| Property | Type | Default value | Description | | --- | --- | --- | --- | --- | |animationData|object||An Object with the exported animation data| |isStopped|bool|null|Controls stopped behavior of Lottie instance| |isPaused|bool|null|Controls paused behavior of Lottie instance |segments|[number] / [[number]]||Defines what segment of the animation to play using playSegments(segments, force). Can also be [[number]] for sequential segment playback| |forceSegments|bool|false*|Indicates force parameter value of playSegments(segments, force) when using segments| |loop|bool / number|false*|Indicates if animation is looping, defaults to lottie default of false| |speed|number|1|Controls speed of animation playback through setSpeed(speed)| |direction|number|1*|Controls direction of animation playback through setDirection(direction)| |eventListeners|[object]||Registers event callbacks with Lottie instance.| |clickToPause|bool|false|Enables clicking on animation to toggle play/pause| |height|number / string||Shorthand for setting style.height| |width|number / string||Shorthand for setting style.width| |className|string||Sets className property of container div| |style|object||Sets inline style of container div| |style.width|number / string|100%|| |style.height|number / string|100%|| |ariaRole|string||Sets aria role of container div| |ariaLabel|string||Sets aria aria-label of container div| |title|string||Sets aria title of container div| |innerRef|func||Callback to receive reference to container div node| |animationRef|func||Callback to receive reference to Lottie animation instance| |onComplete|func||Direct event callback for complete event| |onLoopComplete|func||Direct event callback for loopComplete event| |onEnterFrame|func||Direct event callback for enterFrame event| |onSegmentStart|func||Direct event callback for segmentStart event| |***|any|*|All other properties are proxied to lottie.loadAnimation(options)|

default*: Indicates default is undefined but lottie-web default is type in {type}* format.

Migrating from v1 => v2

Version 2 takes the opinion that react-lottie should match the default functionality of lottie-web as much as possible. Any additional functionality provided by react-lottie is therefore disabled by default, such as click to pause.

For reconciliation performance the options property has been removed in favor of explicitly defining each property on the component directly, allowing for usage of React.PureComponent. This also explicitly defines which properties are controlled vs uncontrolled by react-lottie.

options property has been removed, directly set all options on the component

# v1
<Lottie options={{animationData: myAnimData, loop: true }} />

#v2
<Lottie animationData={myAnimData} loop={true} />

loop property is defaulted to undefined to take on lottie-web default of false

# v1
<Lottie animationData={myAnimData} />

# v2
<Lottie animationData={myAnimData} loop={true} />

If you use isClickToPauseDisabled functionality, this has disabled by default and changed to clickToPause property

# v1
<Lottie animationData={myAnimData} isClickToPauseDisabled={true} />

# v2
<Lottie animationData={myAnimData} />

# v1
<Lottie animationData={myAnimData} isClickToPauseDisabled={false} />

# v2
<Lottie animationData={myAnimData} clickToPause={true} />

Related Projects

• Bodymovin react-lottie is a wrapper of bodymovin
• Angular Lottie angular implementation
• Vue Lottie vue implementation
• React Native Lottie react native implementation by airbnb
• IOS Lottie ios implementation by airbnb
• Android Lottie android implementation by airbnb

Contribution

Your contributions and suggestions are heartily welcome.

License

MIT