Lottie Animation View for React (Angular, Vue)

This project is fully maintained automatically by Relay.

Demo

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

Wrapper of lottie-web

lottie-web (previously Bodymovin) is an Adobe After Effects plugin for exporting animations as JSON. It also provides the player that renders 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

Install through npm:

npm install --save react-lottie

Note: Found a bug or have a feature request? Open an issue on

GitHub and Relay

will review and fix it.

Using from a CDN (no bundler)

The published dist/index.js is a CommonJS build for bundlers and npm consumers. It uses exports and expects react, prop-types and lottie-web to be resolvable, so loading that file with a plain Chat with me

chenqingspring/react-lottie: Render After Effects animations on React based on lottie-web