animation

A React library to work with lottie animations inside React.js

Sep 07, 2021
A React library to work with lottie animations inside React.js

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

propertyrequiredtypedefaultdescription
animationany or stringnullThis property refers to animation data, it is similar to path and animationData property from offical lottie-web lib!
autoplaybooleantruePlay animation automatically.
loopboolean or numberfalsePlay the animation in loop, can be infinity(true) or by times(2/6/8)
frames[number, number]nullThis 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!
currentTimelinestring(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.
speednumber1This property refers to the animation speed, higher values will play the animation faster.
styleCSSProperties{ width: "100%", height: "100%" }This property refers to animation container styles.
onClickMouseEventHandlernullThis property can be used to trigger click events.
justPlayInViewbooleanfalseThis property can be used like a trigger to play the animation just when it is in view.
inViewSettingsIntersectionOptionsnullThis 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

propertyrequiredtypedefaultdescription
animationany or stringnullThis property refers to animation data, it is similar to path and animationData property from offical lottie-web lib!
heightnumbernullThis property refers to section height, how much higher this value, will take more time to finish the animation.
frames[number, number]nullThis 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!
animationPositionstringcenterThis property refers to animation position inside the section. It just can be "left" / "center / "right"
debugModebooleanfalseThis property shows the section and animation container borders, only for debugging purposes.
startMarginnumber0This 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.
styleCSSPropertiesnullThis property refers to animation container styles.
classNamestringnullThis 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

propertyrequiredtypedefaultdescription
animationany or stringnullThis property refers to animation data, it is similar to path and animationData property from offical lottie-web lib!
heightnumbernullThis property refers to section height, how much higher this value, will take more time to finish the animation.
frames[number, number]nullThis 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!
verticalAnimationAlignstringcenterThis property refers to vertical animation align inside parent container, it is similar to align-items from CSS. It can be "center" / "top" / "bottom".
horizontalAnimationAlignstringcenterThis property refers to horizontal animation align inside parent container, it is similar to justify-content from CSS. It can be "left" / "center" / "right"
debugModebooleanfalseThis property shows the section and animation container borders, only for debugging purposes.
styleCSSPropertiesnullThis property refers to section container styles(not the animation container).
classNamestringnullThis 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

Recommended