As 15 melhores bibliotecas de animação para React e aplicações modernas em JavaScript

Tutoriais

Ver o post original devaradise.com/javascript-react-animation-l.. para melhor navegação com o Sumário.

As animações podem levar suas aplicações web de bom a ótimo, tornando-as mais cativantes e interativas. Elas fornecem feedback visual, guiam os usuários pelo interface e adicionam uma pincelada de personalidade a seus projetos.

Há muitas bibliotecas de animação, desde simples, baseadas em CSS, até poderosas bibliotecas JavaScript capazes de criar animações complexas. Neste artigo, nós mergulhamos nas 15 melhores bibliotecas de animação para React e aplicações web modernas.

Da bem conhecida React Spring e Framer Motion às bibliotecas especializadas como Vivus e Three.js, você encontrará algo aqui para tornar seus projetos web brilhantes. Vamos explorar essas bibliotecas e ver como elas podem transformar a experiência do usuário com o seu site!

Animate.css é uma popular biblioteca de 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 é o melhor escolhido para animações simples que precisam ser implementadas rápido sem a necessidade de JavaScript.

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

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

React Spring é uma popular biblioteca de animação para React, que fornece uma maneira poderosa e flexível de criar animações com base na física de mola. 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, bom suporte da comunidade.

A curva de aprendizagem pode ser acentuada para 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视觉mente 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 pequena biblioteca de animação em JavaScript com uma poderosa API. 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 de JavaScript, pode ser complexo para animações simples.

GSAP é uma poderosa biblioteca de animação em JavaScript conhecida por sua alta performance e 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 do pacote maior, necessita de tempo de aprendizagem.

Popmotion é uma biblioteca de animação em JavaScript funcional e flexível. Ela fornece as animações na 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();

Criação de animações e gráficos de movimento complexos.

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

Curva de aprendizagem mais acentuada, tamanho do 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 os desenvolvedores aproveitem o poder do React para a criação de 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>;

Criação de 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
});

Integração de animações criadas no After Effects.

A animações 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 de JavaScript para animar elementos de forma fácil conforme entram ou saem da viewport. Com mais de 22.2k estrelas no GitHub, é perfeito 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 de 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, menor 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 vasta, 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 um método baseado em cronologia para 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 cronologia com controle fino.

Controles de cronologia poderosos, sequências de animações precisas.

Biblioteca mais nova, comunidade menor, complexa para iniciantes.

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

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

Tem outras bibliotecas que valeiam a pena mencionar? Não hesite em partilhá-las no comentário abaixo! Se você achou este post útil, compartilhe-o 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