Cookie Consent by Free Privacy Policy Generator 📌 How to use a Lottie animation in your React app


✅ How to use a Lottie animation in your React app


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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

Image description

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.

...

✅ How to use a Lottie animation in your React app


📈 57.52 Punkte

✅ React Native Animation: Building Play/Pause Controls with Lottie in React Native


📈 54.63 Punkte

✅ Day 4: React Native Onboarding UI using Lottie Animations


📈 34.24 Punkte

✅ React Native Lottie Animations


📈 34.24 Punkte

✅ Rendering( or How to Render) Animation in JSON format with LottieFiles animation in React application


📈 33.52 Punkte

✅ Bring Stunning Animations to Your Apps with Lottie | Xamarin Developer Summit


📈 30.11 Punkte

✅ This Week In React #185: React Conf, React Query, refs, Next.js after, mini-react...


📈 29.08 Punkte

✅ This Week In React #185: React Conf, React Query, refs, Next.js after, mini-react...


📈 29.08 Punkte

✅ Getting Started with Lottie.js


📈 26.97 Punkte

✅ The Easiest Way to Animate WordPress Websites: BeBuilder + Lottie


📈 26.97 Punkte

✅ WhatsApp will animierte Emojis auf Basis von Lottie einführen


📈 26.97 Punkte

✅ Building Animated Buttons in Flutter with Lottie


📈 26.97 Punkte

✅ Solving Memory Issues with Lottie SVG Animations


📈 26.97 Punkte

✅ Pencil2D Animation - Opensource animation software


📈 26.25 Punkte

✅ Animation -13 : Simple Content Preload CSS Animation


📈 26.25 Punkte

✅ Animation -17 : Staggered Stair Loading Animation


📈 26.25 Punkte

✅ Animation -18 : Pure CSS Gooey Loader Animation


📈 26.25 Punkte

✅ Specify how multiple animation effects should composite with `animation-composition`


📈 26.25 Punkte

✅ Animation -19 : Simple preloader CSS Animation


📈 26.25 Punkte

✅ Animation -22 : Cube Flipping Loader CSS Animation


📈 26.25 Punkte

✅ How to Use React Suspense to Improve your React Projects


📈 21.92 Punkte

✅ What’s New in React 19? React Canaries, Actions, and React Compiler


📈 21.81 Punkte

✅ Handling React OTP Input Auth Web | React Native using react-otp-kit package


📈 21.81 Punkte

✅ Handling React OTP Input Auth Web | React Native using react-otp-kit package


📈 21.81 Punkte

✅ How to Test Your React App Effectively with React Testing Library


📈 20.45 Punkte

✅ How To Give your React App a Holiday Theme with react-snowfall


📈 20.45 Punkte

✅ React Toast: Adding Quick and Simple Notifications to Your React App


📈 20.45 Punkte

✅ Add Tweets to Your React App using react-tweet


📈 20.45 Punkte

✅ How to Add Typing Effects to Your React App with React Typical


📈 20.45 Punkte











matomo

Datei nicht gefunden!