Lottie for React, [React Native](https://github.com/react-community/lottie-react-native), [iOS](https://github.com/airbnb/lottie-ios), and [Android](https://github.com/airbnb/lottie-android) === [![npm Version](https://img.shields.io/npm/v/lottie-react-web.svg)](https://www.npmjs.com/package/lottie-react-web) [![License](https://img.shields.io/npm/l/lottie-react-web.svg)](https://www.npmjs.com/package/lottie-react-native)

**Lottie component for React** with runtime animation control. # Introduction Lottie is a library for the Web, Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) animations exported as JSON with [bodymovin](https://github.com/bodymovin/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](https://github.com/chenqingspring/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 `` component can be used in a declarative way: ```jsx import React from 'react'; import Lottie from 'lottie-react-web' import animation from './animation.json' const App = () => ( ) 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: ```jsx 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() (

{ this.setState(state => { isToggled: !state.isToggled}) }} >

) ) 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 `` prop. Example: ```jsx import React from 'react'; import Lottie from 'lottie-react-web' import animation from './animation.json' const Animation = ({ x, y }) => ( ) export default Animation ``` This will override the `Position` value of the layer `JoyStkCtrl01` at runtime. Lottie is compatible with [Joystick 'n Sliders](https://aescripts.com/joysticks-n-sliders/) After Effects plugin, so you can create amazing animations easily.

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

lottie-react-web	9,229	188	-	44	5年前	MIT