Conteúdo do item:

Animação com Lottie + Bodymovin

Como deixar sua página mais estilosa usando After Effects e alguns plugins.

Pacote NPM:
https://www.npmjs.com/package/react-lottie

Link Lottie:
https://lottiereact.com/#gotoandplayvalue-isframe

Plugin:
https://exchange.adobe.com/creativecloud.details.12557.bodymovin.html

Primeiro vamos instalar o pacote NPM

npm install --save react-lottie

import Lottie from "lottie-react";
import partyPopper from "../json/partypopper.json";

Eu fiz duas funções para iniciar e parar minha animação

   const closePartyPopper = () => {
        lottieRef.current.goToAndStop(0, false);
        setStylePartyPopper({ "display": "none" });
    }

    const openPartyPopper = () => {
        setStylePartyPopper({ "display": "block" });
        lottieRef.current.play();
    }

Posicionei a animação onde eu desejava com CSS.

  partyPopper: {
            width: '370px',
            height: '450px',
            position: 'fixed',
            bottom: '0px',
            left: '10px',
            zIndex: 10000,
            cursor: 'pointer',
            display: 'none',
        }

Coloquei a TAG para carrega a animação:

<Lottie lottieRef={lottieRef} style={stylePartyPopper} animationData={partyPopper} className={classes.partyPopper} loop={false} autoplay={false} onClick={closePartyPopper} />

reactjs; lottie; bodymovi; animacao; animação;