The easiest way to handle animations In React/Nextjs

Animations can be a great way to add visual interest and engagement to your React applications. However, managing animations can be a challenge, especially if you’re not familiar with the underlying technologies.

That’s where @lottiefiles/react-lottie-player comes in. @lottiefiles/react-lottie-player is a React component that makes it easy to manage animations created with Lottie. Lottie is a JSON-based animation format that's created by Airbnb. Lottie animations are created using After Effects, and they can be exported as JSON files or Lottie URLs.

In this blog post, we’ll take a look at how to use @lottiefiles/react-lottie-player to manage animations in React. We'll start by explaining what Lottie is and how it works. Then, we'll show you how to use @lottiefiles/react-lottie-player to render Lottie animations in your React applications.

What is Lottie?

Lottie is a JSON-based animation format that’s created by Airbnb. Lottie animations are created using After Effects, and they can be exported as JSON files or Lottie URLs. These JSON files or Lottie URLs can then be used in a variety of platforms, including React.

Lottie animations are vector-based, which means that they scale well to different screen sizes. They’re also lightweight, so they won’t slow down your React applications.

How does @lottiefiles/react-lottie-player work?

@lottiefiles/react-lottie-player is a React component that makes it easy to render Lottie animations in your React applications. The component takes either a JSON file or a Lottie URL as input, and it renders the animation on the screen.

The component also supports a number of options, such as autoplay, loop, and speed. These options allow you to customize the behavior of the animation.

Using react-lottie-player

To use @lottiefiles/react-lottie-player, you'll need to install the package in your project. You can do this with the following command:

npm install @lottiefiles/react-lottie-player

Once you’ve installed the package, you can start using it in your React applications. Here’s an example of how to use @lottiefiles/react-lottie-player to render a Lottie animation:

import React from "react";
import LottiePlayer from "@lottiefiles/react-lottie-player";

const App = () => {
  const animationURL = "https://assets3.lottiefiles.com/packages/lf20_JExdDIS87T.json";

  return (
    <LottiePlayer
      animationURL={animationURL}
      autoplay
      loop
      speed={1}
    />
  );
};

This code will render the Lottie animation that’s located at the specified URL. The animation will play automatically, and it will loop indefinitely. The speed of the animation is set to 1, which means that it will play at its original speed.

Using a Lottie URL

In the example above, we used a Lottie URL to render the animation. Lottie URLs are a convenient way to use Lottie animations in your React applications. They make it easy to share animations with others, and they’re also a great way to keep your animations up-to-date.

To use a Lottie URL, you’ll need to specify the URL in the animationURL prop of the LottiePlayer component. The URL should point to a Lottie animation that's hosted on LottieFiles.com.

Here’s a more advanced use case

'use client'
import { useState, useEffect, useCallback } from 'react';
import { motion } from 'framer-motion';
import { Player } from '@lottiefiles/react-lottie-player';

interface Step {
  id: number;
  text: string;
  animation: string;
}

export const HowItWorks: React.FC = () => {
  const [step, setStep] = useState<number>(0);

  const steps: Step[] = [
    {
      id: 1,
      text: "Create a free account on the Beccountable website.",
      animation: "https://assets3.lottiefiles.com/packages/lf20_JExdDIS87T.json",
    },
    {
      id: 2,
      text: "Create a goal and break down your goals into smaller, more manageable steps.",
      animation: "https://assets3.lottiefiles.com/packages/lf20_dvpgo0cl.json",
    },
    {
      id: 3,
      text: "Find an accountability partner to help you stay on track. Your accountability partner can be a friend, family member, or colleague.",
      animation: "https://assets8.lottiefiles.com/packages/lf20_7sl35zjk.json",
    },
    {
      id: 4,
      text: "As you work towards your goals, you will need to provide proof of activity.",
      animation: "https://assets3.lottiefiles.com/private_files/lf30_p9it5a2a.json",
    },
    {
      id: 5,
      text: "Your referee will review your proof of activity and provide you with feedback. This feedback can help you to identify areas where you need to improve.",
      animation: "https://assets3.lottiefiles.com/packages/lf20_GgLE0z7sML.json",
    },
    {
      id: 5,
      text: "As you achieve your goals, be sure to celebrate your milestones to help you stay motivated and focused.",
      animation: "https://assets9.lottiefiles.com/private_files/lf30_h6i0ko7d.json",
    },
  ];

  const handleStepChange = useCallback(() => {
    setStep((prevStep) => (prevStep + 1) % steps.length);
  }, [steps.length]);

  useEffect(() => {
    const interval = setInterval(handleStepChange, 5000);
    return () => clearInterval(interval);
  }, [handleStepChange]);

  return (
    <motion.div
      className=" flex flex-col sm:min-h-screen h-full"
      key={steps[step].id} // Add a unique key to trigger motion animation on step change
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0.5 }}
      transition={{
        duration: 1, // Adjust the duration as desired
      }}
    >
      <div className='h-[100%] ss:p-10 p-5 flex flex-col items-center justify-center '>
        <div className="grid grid0-cols-2 gap-4">
          <p className="text-sm md:text-base text-gray-500 font-light mt-2 leading-relaxed text-center">
            HOW IT WORKS
          </p>
          <h2 className="text-3xl md:text-4xl text-[#1A2238] font-semibold mb-4 text-center">
            {`It's super simple`}
          </h2>
          <Player
            autoplay
            loop
            src={steps[step].animation}
            style={{ height: '30vh', width: '100%' }}
          />
        </div>
        <p className="text-xl  text-gray-500 font-light mb-4 text-center">
          {steps[step].text}
        </p>
      </div>
    </motion.div>
  );
};

The given component, HowItWorks, is a React functional component that displays a section for a landing page explaining how a certain process or system works. The component includes animations and text to guide users through the steps of the process. Let's break down its functionality:

1. useState and useEffect hooks:

• The component uses the useState hook to manage the current step in the process. It keeps track of the step state variable, which is initialized to 0 using useState<number>(0).
• The useEffect hook is used to set up an interval that increments the step after a fixed duration. In this case, every 5 seconds (5000 milliseconds), the handleStepChange function is called, which increments the step using setStep.

2. Step interface:

• The Step interface defines the shape of individual steps in the process. Each step has an id, text, and an animation URL, representing the step's description and the animation associated with it.

3. steps array:

• The steps array contains an array of Step objects, each representing a different step in the process. Each object includes the step's unique id, a text describing the step, and a URL to an animation that visually illustrates the step.

4. Animation using LottieFiles React Player:

• The component uses the @lottiefiles/react-lottie-player package to render the Lottie animations associated with each step.
• The current step’s animation URL is fetched from the steps array and provided to the Player component as the src prop. This causes the animation associated with the current step to be displayed.

5. Motion animations:

• The component uses the framer-motion library to add motion animations when the steps change.
• The motion.div component wraps the content and applies animations to it. When the step changes, the component animates the transition with a fade-in effect (from opacity: 0 to opacity: 1) and a fade-out effect (to opacity: 0.5).

In summary, the HowItWorks component showcases a step-by-step guide with animations to explain how a process works. It cycles through the steps automatically, displaying the associated animation and descriptive text for each step, and it does so with visual motion effects using the framer-motion library.

Conclusion

@lottiefiles/react-lottie-player is a powerful tool for managing animations in React. The component makes it easy to render Lottie animations, and it supports a number of options that allow you to customize the behavior of the animation.

If you’re looking for a way to add visual interest and engagement to your React applications, then @lottiefiles/react-lottie-player is a great option.

I hope you found this blog post interesting!