How to use a Lottie animation in your React app
Tags: webdev, react, lottie, frontend
Published: 2024-04-25 07:21:11

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:

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

### (commentary on ViteJS)

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

```ts
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:

```tsx
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:

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

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

```tsx
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>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q2e8u9ebsaploz8gqbx.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:

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

```tsx
<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:

```tsx
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:

```tsx
<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.