How to use a Lottie animation in your React app

Lottie is a library that allows you to use animations made in Adobe After Effects in your web projects. It's a great way to add some extra flair to your website or app.

In this article, I'll show you how I use Lottie animations in my React + Styled Components frontends.

Getting started

First I choose an animation from https://app.lottiefiles.com and export the **Lottie JSON** to my assets folder.

ViteJS provides a handy way to import JSON files:

import musicAnimation from '../../assets/lottiefiles/music.json';

(commentary on ViteJS)

Maybe it's time to show my ViteJS config actually:

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              fileName: false
            }
          ]
        ]
      }
    }),
    svgr()
  ]
});

You can see how I import SVG and set up React + Styled Components.

Back to Lottie!

Using Lottie in React

So nothing complicated, just importing the Lottie Player and the json file:

import {Player as Lottie} from '@lottiefiles/react-lottie-player';
import musicAnimation from '../../assets/lottiefiles/music.json';

You can create a react component to set up the style and other properties:

const MusicComponent = () => (
  <Lottie
    hover
    loop={true}
    src={musicAnimation}
  />
);

And then use it in your app like any other component:

const $Lottie = styled(Lottie)`
  cursor: pointer;
  height: 100px;
`;

const Music = (props: {num: number}) => (
  <$Lottie hover loop={true} src={musicAnimation} />
);

// ... in the component

<$Row>
  {musicChoices.map(musicNum => (
    <Music key={`music-${musicNum}`} num={musicNum} />
  ))}
</$Row>

You'll find Lottie usage documentation here https://docs.lottiefiles.com/lottie-player/components/lottie-player/usage

GIF

Visualize the selection

When we click on the music, we want to change the color of the animation.

I created a variation of the Lottie animation with a different color:

import musicAnimation from '../../../assets/lottiefiles/music.json';
import musicSelectedAnimation from '../../../assets/lottiefiles/music-selected.json';

<Lottie
  hover
  loop={true}
  src={selected ? musicSelectedAnimation : musicAnimation}
/>

The issue is that the animation is stopped when we change the source.

So I added a simple isPlaying React local state to the component to start the colored one on switch:

const [isPlaying, setIsPlaying] = useState(false);

// ...

const play = async () => {
  audio.play();
  setIsPlaying(true);
};

const stop = () => {
  audio.pause();
  setIsPlaying(false);
};

Now we can use the autoplay property of the Lottie Player:

<Lottie
  hover
  loop={true}
  autoplay={isPlaying}
  src={selected ? musicSelectedAnimation : musicAnimation}
/>

Thanks for reading, see you around!

As always, feel free to comment on parts you need more explanations for, or share your thoughts on how you would have handled the parts you disagree with.