Integrate Stunning Lottie Animations in Your React App: A Step-by-Step Guide

Integrating animations into a React application can significantly enhance user experience, making it more engaging and visually appealing. Lottie, an open-source animation file format, is widely used for rendering animations in a web-friendly way.

With the react-lottie-player library, you can easily add and control Lottie animations in your React projects. In this blog post, we’ll explore how to use this library to integrate Lottie animations into a React application.

Getting Started with Lottie in React

Step 1: Installing the Lottie Player Library

First, you need to install the @lottiefiles/react-lottie-player package. You can do this using npm:

npm i @lottiefiles/react-lottie-player

Step 2: Creating a React Component for Your Animation

Let’s create a new React component called Cycle.jsx that will display a Lottie animation.

import React from "react";
import { Player } from "@lottiefiles/react-lottie-player";
import CycleAnimation from "./Video/CycleAnimation.json";

const Cycle = () => {
  return (
    <>
      <Player
        src={CycleAnimation}
        //className="player"
        loop
        autoplay
        //speed={10}
        //background="red"
        //direction={-1}
        style={{ width: 400, height: 400 }}
      >
      </Player>
    </>
  );
};

export default Cycle;

In the above code:

We import the Player component from @lottiefiles/react-lottie-player.
We import our Lottie animation JSON file.
We configure the Player component to automatically play the animation, loop it, and set the desired width and height.

Step 3: Using the Animation Component in Your App

Next, let’s include our Cycle component in the main application file.

App.jsx

import Cycle from './components/Cycle';

function App() {
  return (
    <>
      <h1 style={{ textAlign: 'center' }}>Using Lottie with React JS ⚛️</h1>
      <Cycle />
    </>
  );
}

export default App;

In this App component:

We import the Cycle component.
We include the Cycle component inside our main render method to display it on the page.

It should look like this 👀:

Other Configurations for Lottie

In addition to the properties we saw previously, the Player component has other interesting properties such as:

Speed: Property that receives a numeric value, which manages the speed of the animation and by default has the value of 1.

<Player
	src={CycleAnimation}
	loop
	autoplay
	speed={10}
	style={{ width: 400, height: 400 }}
>
</Player>

Background: Property that receives a string value and which handles the background color of the Lottie.

<Player
  src={CycleAnimation}
  loop
  autoplay
  background='red'
/>

Direction: Property that receives a numeric value (1 or -1) and which manages in which direction the animation should be performed (starting from the beginning to the end or starting from the end to the beginning).

By default its value is 1.

<Player
  src={CycleAnimation}
  loop
  autoplay
  direction={-1}
/>

Style: Property that receives an object (just like an inline style in JSX) and which handles the style of the Lottie container.

<Player
  src={CycleAnimation}
  className="player"
  loop
  autoplay
  style={{ height: '300px', width: '300px' }}
/>

Websites Where You Can Download Lottie files

Alternative to react-lottie-player

Export Lottie animations After Effects Plugin

Lottie After Effects

Conclusion

Integrating Lottie animations into a React application using the react-lottie-player library is straightforward and offers a lot of flexibility. You can easily adjust the playback, add controls, and style the animation to fit your design.

Animations can bring your applications to life, providing a richer user experience. Start experimenting with Lottie animations today and see how they can enhance your React projects!

Feel free to share your animations and how you’ve integrated them into your projects in the comments below! Happy animating!