react-lottie-tools

v1.1.6

Published

2 years ago

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

Downloads

213

0High
0Medium
0Low

willyamdev

lottie animation anim lottie-web react-lottie react interactions

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!

Install

npm install react-lottie-tools
or
yarn add react-lottie-tools

Required packages

npm install lottie-web react-intersection-observer framer-motion
or
yarn add lottie-web react-intersection-observer framer-motion

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

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;