As 15 melhores bibliotecas de animação para React e aplicativos modernos em JavaScript

Tutoriais

Veja o post original devaradise.com/javascript-react-animation-l.. para uma melhor navegação com a Tabela de Conteúdo.

As animações podem levar seus aplicativos da Web de bons a ótimos, tornando-os mais envolventes e interativos. Elas fornecem feedback visual, guiam os usuários através da interface e adicionam um toque de personalidade aos seus projetos.

Existem muitas bibliotecas de animação, desde bibliotecas simples baseadas em CSS até poderosas bibliotecas JavaScript capazes de criar animações complexas. Neste artigo, estamos mergulhando nas 15 principais bibliotecas de animação para React e aplicativos da web modernos.

Desde o conhecido React Spring e Framer Motion até bibliotecas especializadas como Vivus e Three.js, você encontrará algo aqui para fazer seus projetos da web brilharem. Vamos explorar essas bibliotecas e ver como elas podem transformar a experiência do usuário do seu site!

Animate.css é uma popular biblioteca CSS que fornece uma ampla gama de animações predefinidas, tornando fácil aplicar animações a qualquer projeto web. Com mais de 80.2k estrelas no GitHub e milhões de downloads no npm, Animate.css é uma opção de primeira escolha para animações rápidas e simples.

npm install animate.css

import 'animate.css';

<div class="animate__animated animate__bounce">An animated element</div>

Animate.css é melhor adaptado para animações simples que precisam ser implementadas rapidamente sem a necessidade de JavaScript.

Fácil de usar, leve, grande variedade de animações.

Limitado a animações CSS, menor controle sobre o comportamento das animações.

React Spring é uma popular biblioteca de animação para React, fornecendo uma maneira poderosa e flexível para criar animações com base na física de molas. Tem mais de 27.8k estrelas no GitHub e é amplamente usado na comunidade.

npm install @react-spring/web

import React from 'react';
import { useSpring, animated } from '@react-spring/web';

const App = () => {
    const springs = useSpring({
        from: { x: 0 },
        to: { x: 100 }
    });

    return (
        <animated.div
            style={{
                width: 80,
                height: 80,
                background: '#ff6d6d',
                borderRadius: 8
            }}
        />
    );
};

export default App;

Criar animações complexas com controle fino nas transições e interações.

Muito flexível, suporta animações avançadas, boa支助社区.

O aprendizado pode ser acentuado para os iniciantes.

Framer Motion é uma poderosa biblioteca de animações conhecida por sua facilidade de uso e recursos abrangentes. Tem mais de 22.8k estrelas no GitHub e é altamente elogiada por sua API intuitiva.

npm install framer-motion

import React from 'react';
import { motion } from 'framer-motion';

const App = () => {
    return (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
            Hello, Framer Motion!
        </motion.div>
    );
};

export default App;

Criar animações suaves e visualmente atraentes com pouco código.

API intuitiva, suporta animações de quadro-chave, ótima documentação.

Tamanho de pacote ligeiramente maior em comparação com outras bibliotecas.

Anime.js é uma biblioteca de animação em JavaScript leve com uma API poderosa. Tem mais de 49.2k estrelas no GitHub e é amplamente usada para criar animações complexas e altamente personalizáveis.

npm install animejs

import anime from 'animejs/lib/anime.es.js';

anime({
    targets: 'div',
    translateX: 250,
    rotate: '1turn',
    duration: 800
});

Criar animações complexas e detalhadas com controle preciso.

Leve, versátil, altamente personalizável.

Requer conhecimento em JavaScript, pode ser complexo para animações simples.

GSAP é uma poderosa biblioteca de animação em JavaScript conhecida por sua alta performance e por um conjunto de recursos abrangente. Tem mais de 19.2k estrelas no GitHub e é amplamente usada em aplicações web e mobile.

npm install gsap

import { gsap } from 'gsap';

gsap.to('.box', { rotation: 27, x: 100, duration: 1 });

Animações de alto desempenho e sequências complexas.

Extremamente poderosa, robusta, alta performance.

Tamanho de pacote maior, requer tempo de aprendizado.

Popmotion é uma biblioteca de animação em JavaScript funcional e flexível. Ela fornece as animações no Framer Motion. Tem mais de 19.9k estrelas no GitHub e oferece uma série de ferramentas para criar animações e interações.

npm install popmotion

import { animate } from 'popmotion';

animate({
    from: 0,
    to: 100,
    onUpdate: (latest) => {
        console.log(latest);
    }
});

Criar interações de nível baixo, complexas e animações altamente personalizáveis.

API funcional, flexível, escalável e pacote pequeno.

Pode ser complexo para casos de uso simples.

Mo.js é uma ferramenta de animação gráfica para a web. Tem mais de 18,3k estrelas no GitHub e oferece uma variedade de ferramentas para criar animações.

npm install @mojs/core

import { Mojs } from '@mojs/core';

const bouncyCircle = new mojs.Shape({
    parent: '#bouncyCircle',
    shape: 'circle',
    fill: { '#F64040': '#FC46AD' },
    radius: { 20: 80 },
    duration: 2000,
    isYoyo: true,
    isShowStart: true,
    easing: 'elastic.inout',
    repeat: 1
});

bouncyCircle.play();

Criar animações e gráficos de movimento complexos.

Versátil, poderoso, ótimo para gráficos de movimento.

Curva de aprendizagem mais pronfunda, tamanho de pacote maior.

Remotion permite que você crie vídeos de forma programática usando React. É uma biblioteca única com mais de 19,6k estrelas no GitHub, permitindo que desenvolvedores usem o poder do React para criar conteúdo de vídeo.

# new project
npx create-video@latest

# install to existing project
npm i --save-exact [email protected] @remotion/[email protected]

export const MyComposition = () => {
    return null;
};

import React from 'react';
import {Composition} from 'remotion';
import {MyComposition} from './Composition';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Empty"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};

import { registerRoot } from 'remotion';
import { RemotionRoot } from './Root';
registerRoot(RemotionRoot);

Geração de vídeos de forma programática usando React.

Funcionalidade única, aproveita as habilidades do React, capacidades poderosas de criação de vídeo.

Caso de uso específico, pode ser complexo para iniciantes.

Vivus é uma biblioteca JavaScript leve para animar SVGs. Com mais de 15.1k estrelas no GitHub, é uma ótima escolha para criar animações SVG.

npm install vivus

import Vivus from 'vivus';

new Vivus(
    'my-svg',
    {
        type: 'delayed',
        duration: 200,
        animTimingFunction: Vivus.EASE
    },
    myCallback
);

// svg
<object id='my-svg' type='image/svg+xml' data='link/to/my.svg'></object>;

Criar animações de desenho para SVGs.

Leve, especializado em SVGs, fácil de usar.

Limitado a SVGs, não adequado para outros tipos de animações.

Lottie é uma biblioteca para renderizar animações criadas no Adobe After Effects. Com mais de 29.9k estrelas no GitHub, ela é amplamente usada para integrar animações complexas.

npm install lottie-web

import lottie from 'lottie-web';
import animationData from './animation.json';

lottie.loadAnimation({
    container: document.getElementById('animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData
});

Integrar animações criadas no After Effects.

Amostras de animação de alta qualidade, integra-se bem com o After Effects.

Requer o After Effects para a criação de animações, arquivos maiores.

ScrollReveal é uma biblioteca JavaScript para animar elementos com facilidade conforme entram ou saem da visualização. Com mais de 22.2k estrelas no GitHub, ela é perfeita para animações baseadas em rolagem.

npm install scrollreveal

import ScrollReveal from 'scrollreveal';

ScrollReveal().reveal('.box', { delay: 500 });

<h1 class="headline">Widget Inc.</h1>

Adicionar animações de revelação baseadas em rolagem.

Fácil de usar, leve, ótimo para animações de rolagem

Limitado a animações baseadas em rolagem.

ScrollMagic é uma biblioteca para criar interações e animações baseadas em rolagem. Com mais de 14.8k estrelas no GitHub, oferece uma maneira robusta para gerenciar animações baseadas em rolagem.

npm install scrollmagic

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller();
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
    duration: 100, // the scene should last for a scroll distance of 100px
    offset: 50 // start this scene after scrolling for 50px
})
    .setPin('#my-sticky-element') // pins the element for the the scene's duration
    .addTo(controller); // assign the scene to the controller

Criar interações complexas de rolagem e animações.

Potente, flexível, integra bem com GSAP.

Pode ser complexo para animações simples, tamanho de pacote maior.

Typed.js é uma biblioteca de JavaScript que digita texto, fazendo com que pareça que está sendo digitado por uma pessoa. Com mais de 15,1k estrelas no GitHub, é ótimo para adicionar animações de digitação.

npm install typed.js

import Typed from 'typed.js';

const typed = new Typed('#element', {
    strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
    typeSpeed: 50
});

Criar animações de digitação para texto.

Fácil de usar, leve, ótimo para efeitos de digitação.

Limitado a animações de digitação, menos flexibilidade.

Three.js é uma poderosa biblioteca de 3D para JavaScript, que permite criar animações e visualizações 3D complexas. Com mais de 101k estrelas no GitHub, ela é amplamente usada para aplicações web 3D.

npm install three

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Criar animações 3D avançadas e visualizações.

Extremamente poderosa, comunidade ampla, suporta cenários 3D complexos.

Curva de aprendizagem acentuada, tamanho de pacote maior.

Teatro.js é uma biblioteca de animação avançada para criar e controlar animações de forma programática. Com mais de 11k estrelas no GitHub, ela fornece uma abordagem baseada em timeline para as animações.

# r3f and its dependencies
npm install --save react three @react-three/fiber

# Theatre.js
npm install --save @theatre/[email protected] @theatre/[email protected] @theatre/[email protected]

# Three.js types (when using Typescript)
npm install --save-dev @types/three

import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { getProject } from '@theatre/core'

// our Theatre.js project sheet, we'll use this later
const demoSheet = getProject('Demo Project').sheet('Demo Sheet')

const App = () => {
  return (
    <Canvas
      camera={{
        position: [5, 5, -5],
        fov: 75,
      }}
    >
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  )
}

createRoot(document.getElementById('root')!).render(<App />)

Criar animações baseadas em timeline com controle fino.

Controles poderosos de timeline, sequências de animação precisas.

Biblioteca mais nova, comunidade menor, complexa para iniciantes.

Escolher a biblioteca de animação certa depende dos necessidades e complexidade do seu projeto. Se você está procurando animações simples e rápidas, as bibliotecas baseadas em CSS, como Animate.css, são ideais. Para interações mais complexas e necessidades de alto desempenho, considere as poderosas bibliotecas como GSAP ou Three.js.

Cada biblioteca tem suas fortes, portanto, avalie-as com base em fatores como a facilidade de uso, apoio da comunidade e as funcionalidades específicas que você necessita. Você pode começar a experimentar com estas principais bibliotecas de animação antes de implementá-las em seu projeto.

Tem outras bibliotecas que merecem ser mencionadas? Não hesite em partilhá-las no comentário abaixo! Se você achou este post útil, compartilhe com seus colegas desenvolvedores e explore mais tutoriais neste site.

Obrigado. Boa dia!

Source:
https://devaradise.hashnode.dev/top-15-animation-libraries-for-react-modern-javascript-apps-clyppjb22000b09l26nxe85v7