Gathering detailed insights and metrics for lottie-react-web
Gathering detailed insights and metrics for lottie-react-web
Installations
npm install lottie-react-webDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
10.16.3
NPM Version
6.9.0
Releases
Unable to fetch releases
Languages
3
JavaScript
HTML
Shell
JavaScript (83.89%)
HTML (8.25%)
Shell (7.86%)
Developer
felippenardi
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
187 Stars
158 Commits
46 Forks
4 Watchers
13 Branches
26 Contributors
Updated on Jul 09, 2025
Maintainers
1
Package Meta Information
Latest Version
2.2.2
Package Id
lottie-react-web@2.2.2
Size
251.05 kB
NPM Version
6.9.0
Node Version
10.16.3
Published on
Jun 10, 2020
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Peer Dependencies
1
Dev Dependencies
24
@kadira/storybookbabel-clibabel-corebabel-eslintbabel-loaderbabel-plugin-transform-runtimebabel-polyfillbabel-preset-react-appchaienzymeeslinteslint-config-airbnbeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reactgit-url-parsejsdommochaprop-typesreactreact-addons-test-utilsreact-domsinonstandard-version
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:
1import React from 'react'; 2import Lottie from 'lottie-react-web' 3import animation from './animation.json' 4 5const App = () => ( 6 <Lottie 7 options={{ 8 animationData: animation 9 }} 10 /> 11) 12 13export 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:
1import React, { Component } from 'react'; 2import Lottie from 'lottie-react-web' 3import toggleAnimation from './toggleAnimation.json' 4 5export default class App extends Component { 6 this.state = { isToggled: false } 7 8 render() ( 9 <div 10 onClick={() => { 11 this.setState(state => { isToggled: !state.isToggled}) 12 }} 13 > 14 <Lottie 15 direction={this.state.isToggled ? 1 : -1} 16 options={{ 17 animationData: toggleAnimation, 18 loop: false, 19 }} 20 /> 21 </div> 22 ) 23) 24 25export 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:
1import React from 'react'; 2import Lottie from 'lottie-react-web' 3import animation from './animation.json' 4 5const Animation = ({ x, y }) => ( 6 <Lottie 7 options={{ 8 animationData: animation, 9 }} 10 animationControl={{ 11 'Square,Transform,Position': [x, y], 12 }} 13 /> 14) 15 16export 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.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 8/28 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 17 are checked with a SAST tool
Reason
110 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-mpcf-4gmh-23w8
- Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
- Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-4hpf-3wq7-5rpr
- Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-2m96-9w4j-wgv7
- Warn: Project is vulnerable to: GHSA-h726-x36v-rx45
- Warn: Project is vulnerable to: GHSA-pp57-mqmh-44h7
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-6394-6h9h-cfjg
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
- Warn: Project is vulnerable to: GHSA-7xcx-6wjh-7xp2
- Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr
Score
2
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More