lottie-react-component v1.0.0

Lottie for React

Lottie component for React with runtime animation control and full typescript support.

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 lottie-react-web fork that adds native typescript support, esm and cjs compatibility, and a rewrite with hooks

Getting Started

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

yarn add lottie-react-component

or

npm i --save lottie-react-component

Usage

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

import React from "react";
import Lottie from "lottie-react-component";
import animation from "./animation.json";

const App = () => <Lottie animationData={animation} loop />;

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-component'
import toggleAnimation from './toggleAnimation.json'

export default const App = () => {
  const [isToggled, setIsToggled] = useState(false);

  return  (
    <div
      onClick={() => {
        setIsToggled(t => !t);
      }}
    >
      <Lottie
        direction={isToggled ? 1 : -1}
        animationData={toggleAnimation}
        loop={false}
      />
    </div>
  )
}

export default App

API

These are all props available:

Props

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-component";
import animation from "./animation.json";

const Animation = ({ x, y }) => (
  <Lottie
    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.