React Lottie Tools

This React library helps to work with lottie animations inside React.js

Info

This library is an abstraction of the official lottie library. It means that if you have some previous knowledge about that library you will have facility to use React Lottie Tools, but it doesn't mean that you need to know the official library to use this library as since the intention of this library is make things simple.

This library makes available some components to help you to use lottie animations inside React.js, since simple animations to more complex animations involving some interactions.

This library also use other libraries to help with interactions, like Framer Motion and react-intersection-observer.

Also is important to mention that React Lottie Tools is highly typed!

Getting started

LottieAnimation component

This is the most simple component of this library, it just load a lottie animation without any interactions!

import React from "react";
import { LottieAnimation } from "react-lottie-tools";
import menu from "./assets/lottie-examples/menu.json";

export default function MyComponent() {
  return (
    <LottieAnimation
      animation={menu}
      style={{ width: "60px", height: "60px" }}
    />
  );
}

LottieAnimation component props

property required type default description
animation any or string null This property refers to animation data, it is similar to path and animationData property from offical lottie-web lib!
autoplay boolean true Play animation automatically.
loop boolean or number false Play the animation in loop, can be infinity(true) or by times(2/6/8)
frames [number, number] null This property refers to animation frames, if your animation has 300 frames, you need to put [0, 300], being 0 the initial frame and 300 the last one!
currentTimeline string(from/to) "from" This property refers to the current animation state, "from" means initial and "to" the end! You can use this property to control the animation.
speed number 1 This property refers to the animation speed, higher values will play the animation faster.
style CSSProperties { width: "100%", height: "100%" } This property refers to animation container styles.
onClick MouseEventHandler null This property can be used to trigger click events.
justPlayInView boolean false This property can be used like a trigger to play the animation just when it is in view.
inViewSettings IntersectionOptions null This property can be used to configure inView interaction. This configs just will be applied if property justPlayInView is true.

LottieAnimation component with inView interaction

How does it work?
It just play the animation when it is in view.

export default function MyComponent() {
  return (
    <LottieAnimation
      animation={menu}
      style={{ width: "60px", height: "60px" }}
      justPlayInView
    />
  );
}

You also can change the normal behavior of inView interaction using inViewSettings property:
this example is using threshold property, that means that this animation just will start if the animation container is 100% inside the view.

export default function MyComponent() {
  return (
    <LottieAnimation
      animation={menu}
      style={{ width: "60px", height: "60px" }}
      justPlayInView
      inViewSettings={{ threshold: 1 }}
    />
  );
}

Working with scroll interactions

Inside React Lottie Tools there are 2 components to work with scroll interactions, they are LottieScrollSection and LottieScrollAnimation component. At first looking they look the same, but they have your differences, LottieScrollSection should be used if you just want an entire animation inside a section without any other content, just animation, also it helps to let the HTML more semantic helping in SEO scores. On the other hand LottieScrollAnimation can be used inside others elements like div, sections and so on to build your own section with other contents inside it!

LottieScrollSection component

The LottieScrollSection component will sincronize the current scroll with the animation frame. It means that according you scroll the page, the animation will play.

import { LottieScrollSection } from "react-lottie-tools";
import menu from "./assets/lottie-examples/menu.json";

export default function MyComponent() {
  return (
    <LottieScrollSection height={4000} animation={menu} frames={[0, 390]} />
  );
}

LottieScrollSection component props

property required type default description
animation any or string null This property refers to animation data, it is similar to path and animationData property from offical lottie-web lib!
height number null This property refers to section height, how much higher this value, will take more time to finish the animation.
frames [number, number] null This property refers to animation frames, if your animation has 300 frames, you need to put [0, 300], being 0 the initial frame and 300 the last one!
animationPosition string center This property refers to animation position inside the section. It just can be "left" / "center / "right"
debugMode boolean false This property shows the section and animation container borders, only for debugging purposes.
startMargin number 0 This property refers to increase the trigger point, the default behavior is that the animation just will play when the section take all the screen view, but you can increase that value to start before that.
style CSSProperties null This property refers to animation container styles.
className string null This property refers to animation container className.

LottieScrollAnimation component

The LottieScrollAnimation component also will sincronize the current scroll with the animation frame.

import { LottieScrollAnimation } from "react-lottie-tools";
import menu from "./assets/lottie-examples/menu.json";

export default function MyComponent() {
  return (
    <div style={{ display: "flex" }}>
      <div style={{ flex: 1 }}>
        <LottieScrollAnimation
          height={4000}
          animation={menu}
          frames={[0, 390]}
        />
      </div>
      <div style={{ flex: 1 }}>
        <h1>This is my custom content</h1>
      </div>
    </div>
  );
}

LottieScrollAnimation component props

property required type default description
animation any or string null This property refers to animation data, it is similar to path and animationData property from offical lottie-web lib!
height number null This property refers to section height, how much higher this value, will take more time to finish the animation.
frames [number, number] null This property refers to animation frames, if your animation has 300 frames, you need to put [0, 300], being 0 the initial frame and 300 the last one!
verticalAnimationAlign string center This property refers to vertical animation align inside parent container, it is similar to align-items from CSS. It can be "center" / "top" / "bottom".
horizontalAnimationAlign string center This property refers to horizontal animation align inside parent container, it is similar to justify-content from CSS. It can be "left" / "center" / "right"
debugMode boolean false This property shows the section and animation container borders, only for debugging purposes.
style CSSProperties null This property refers to section container styles(not the animation container).
className string null This property refers to section container className(not the animation container).

Using with Next.js

Some components can't be rendered in server side, like LottieScrollSection, the reason of that is because this component uses the global window object to make some calcs and window is not defined in server side.

To solve this problem you can use dynamic import of Next.js to ensure that this component just will be rendered in browsers.

LottieScrollSection with next.js dynamic import

import { LottieScrollSection } from "react-lottie-tools";
import menu from "./assets/lottie-examples/menu.json";

import dynamic from "next/dynamic";
const LottieScrollSection = dynamic(
  import("react-lottie-tools").then((data) => data.LottieScrollSection),
  { ssr: false } // ssr is important to be false
);

export default function MyComponent() {
  return (
    <LottieScrollSection height={4000} animation={menu} frames={[0, 390]} />
  );
}

Using typescript

import {
  LottieScrollSection,
  LottieScrollSectionProps,
} from "react-lottie-tools";
import menu from "./assets/lottie-examples/menu.json";

import dynamic from "next/dynamic";
const LottieScrollSection =
  dynamic <
  LottieScrollSectionProps >
  (import("react-lottie-tools").then((data) => data.LottieScrollSection),
  { ssr: false }); // ssr is important to be false

const MyComponent: React.FC = () => {
  return (
    <LottieScrollSection height={4000} animation={menu} frames={[0, 390]} />
  );
};

export default MyComponent;

GitHub

https://github.com/willyamdev/react-lottie-tools