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

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

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

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