Bibliotecas de animação JavaScript: 10 opções populares

Adoro experimentar vários efeitos de animação, principalmente aqueles que são simples e podem ser implementados com CSS. Mas, se olharmos para o quadro mais amplo – as animações CSS só o levarão até aqui. E, se você quiser criar experiências de usuário complexas e interativas, mais cedo ou mais tarde, você terá que mudar para JavaScript.

A principal vantagem de usar JavaScript para efeitos de animação é que você pode controlar muito mais a lógica da animação. Isso inclui a fluidez das transições, controlando o estado e a resposta do DOM, mas também o uso de gráficos 2D e 3D graças ao WebGL.

Os tipos de bibliotecas de animação JavaScript

Portanto, como as bibliotecas de animação JS vêm em muitas formas e formatos, isso realmente ajuda a restringir a área de foco específica . Muitos dos mecanismos e estruturas não são usados ​​apenas para coisas de front-end, mas também para criar jogos e criar outros conteúdos interativos.

Para este resumo específico, meu foco está nas bibliotecas que são mais comumente usadas no desenvolvimento front-end, sozinhas ou em conjunto com qualquer uma das estruturas atuais.

No devido tempo, considerarei adicionar mais bibliotecas a esta lista que são menores em escala, mas ainda fornecem maneiras significativas de adicionar animações interativas aos seus projetos.

Cada biblioteca tem links para seu site e página do GitHub. Também adicionei um exemplo do CodePen que você pode executar nesta página e recursos adicionais – que são tutoriais ou guias de vídeo.

#1 – Três.js

Three.js é a biblioteca para criar efeitos animados em 3D que você usa no desenvolvimento de sites criativos. O Three.js elimina a necessidade de os desenvolvedores aprenderem sobre WebGL e, em vez disso, pode se concentrar na criação de efeitos 3D interativos sem a complexidade.

No high-end, o Three.js é usado para criar experiências virtuais interativas, como Mozilla Hubs. Além disso, a biblioteca também é frequentemente utilizada na criação de experiências de página de destino imersivas. Editores e editores de classe mundial usam o Three.js há anos para criar páginas baseadas em dados com atualizações dinâmicas.

Se você visitar a página inicial, há um grande número de projetos destacados listados, o que deve lhe dar muita inspiração/claridade sobre como esta biblioteca é usada em ambientes cotidianos.

Animação de exemplo do Three.js

Veja o Pen Mesh Line Waves Background – THREE.js do CP Designer (@cpandya) no CodePen.

Recursos adicionais do Three.js

• Como construímos o globo do GitHub
• Efeito de distorção de pixel com Three.js

#2 – Anime.js

Anime.js de Julian Garnier é provavelmente a segunda biblioteca mais conhecida para integrar animações em projetos baseados na web. Sua popularidade vem de ter ferramentas embutidas para ajudar a acelerar o processo de animação de elementos CSS, SVG e DOM.

Por exemplo, você pode direcionar seletores CSS específicos e, em seguida, aplicar uma lógica de animação refinada por meio de JavaScript, em vez de escrever os @keyframes você mesmo.

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

Apenas com o snippet acima, você pode fazer um efeito parecido com este:

Se você fosse fazer isso com CSS – você precisaria selecionar cada bloco de grade individual e escrever uma lógica separada para ele. Isso não é apenas impraticável, mas também dá muito trabalho. Na página de documentos do Anime.js, você encontrará muitos exemplos semelhantes. E a demonstração abaixo vai um passo além para mostrar como essa biblioteca pode ser usada no desenvolvimento de front-end moderno.

Animação de exemplo Anime.js

Veja a animação do logotipo Pen anime.js por Julian Garnier (@juliangarnier) no CodePen.

Recursos adicionais do Anime.js

• Tutorial Anime.js – Mecanismo de animação JavaScript em 10 minutos
• Animação da interface do usuário com Anime.js

#3 – Movimento Pop

Popmotion é uma biblioteca de animação de baixo nível escrita em TypeScript. É também a biblioteca que alimenta a popular biblioteca Framer Motion (listada neste artigo) usada em projetos React. Sendo sem opinião, você pode usar o Popmotion para integrar efeitos personalizados escrevendo funções adicionais que deseja usar.

Como o nome indica, o Popmotion é particularmente bom para animar elementos da interface do usuário através do uso de várias animações baseadas em movimento. Isso inclui efeitos como atenuação, molas, quadros-chave e efeitos de transição mais complexos. O exemplo abaixo faz um bom trabalho ao mostrar a aplicação prática de efeitos de animação para elementos componentes.

Animação de Exemplo Popmotion

Veja a demonstração do Pen Popmotion de Arden (@aderaaij) no CodePen.

Recursos Adicionais do Popmotion

• Visualize o algoritmo de panquecas com React e Popmotion.io
• Adicione animações de primavera ao seu aplicativo angular com popmotion

#4 – mo.js

Mo.js é focado em gráficos em movimento e se destaca por fornecer uma estrutura de código simples que você pode implementar em projetos independentes, mas também em conjunto com estruturas como React.

E, como o Mo.js vem com sua própria API declarativa, você controla cada etapa da animação. Isso inclui definir não apenas a lógica para o que você deseja alcançar, mas também como você vai chegar lá. A biblioteca inclui componentes e exemplos pré-fabricados que são adaptados para experiências de usuário visualmente ricas.

Aqui está um trecho de amostra:

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

Como você pode ver, grande parte da lógica é pré-definida. Portanto, em vez de ter que criar suas próprias ideias, você pode anotar as propriedades fornecidas e construir seu caminho. A seção de tutorial nos documentos tem alguns exemplos de aplicações práticas, particularmente efeitos que adicionam animações minúsculas, mas significativas, a elementos de páginas da Web do dia a dia.

Animação de exemplo mo.js

Veja os Efeitos Pen Link Hover com mo.js por Mike Quinn (@mprquinn) no CodePen.

Recursos adicionais do mo.js

• Como usar MoJS com React
• Conhecendo o MoJS

#5 – p5.js

p5.js é a implementação JavaScript do Processing – uma “linguagem” separada destinada ao uso por artistas visuais. Ao contrário de alguns dos exemplos que vimos até agora, o p5.js é uma biblioteca de animação universal, fornecendo soluções não apenas para aplicações práticas, mas também para projetos mais robustos e complexos. Isso inclui suporte completo para efeitos 2D e 2D.

No que diz respeito ao uso de p5.js em projetos de sites, a biblioteca abre um caminho para uma criatividade profunda. Por exemplo, você pode inicializar rapidamente efeitos como uma cortina de fumaça, árvores animadas e páginas de destino baseadas em dados com as quais os usuários podem interagir.

Você tem que fazer todos os desenhos sozinho, mas com o número de recursos disponíveis para p5.js – acho que você descobrirá que não é tão difícil começar. E, nem é preciso dizer, que a comunidade por trás desses dois projetos está muito envolvida.

Animação de exemplo p5.js

Veja Pen P5.JS Twist and Turn. por Sdsmnc (@supastrocat) no CodePen.

Recursos adicionais do p5.js

• Processamento e p5.js
• Pôr do sol e estrelas cadentes em p5.js

#6 - Movimento

O React é tão popular que só faz sentido ter sua própria biblioteca de animação. O Framer Motion vem com uma API pré-criada que permite que os desenvolvedores do React simplifiquem o processo de construção de componentes animados, mas também alivia alguns dos obstáculos da necessidade de aprender CSS e suas propriedades de animação independentes. E é bem fácil de trabalhar.

Um trecho de exemplo:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

As animações no Framer são definidas pelas propriedades de motion e animate . Isso permite selecionar componentes inteiros e seus elementos internos, que você pode enriquecer com sua lógica de animação personalizada. O artigo Smashing de Nefe Emadamerho-Atori na seção de recursos é um ótimo ponto de partida para ver como o Framer Motion funciona.

Animação de exemplo de movimento

Veja o botão Pen Laser Sight da codebro (@codebro) no CodePen.

Recursos adicionais de movimento

• Apresentando o Framer Motion
• Animações responsivas com Framer Motion

#7 – GAP

Eu tenho visto arte GSAP sendo compartilhada no Twitter recentemente. Mas não chega a ser uma surpresa. Muitas das animações e efeitos dinâmicos que vemos em projetos criativos foram possíveis graças ao robusto mecanismo GSAP.

A biblioteca não é apenas otimizada para desempenho, mas também é altamente compatível com suas tecnologias favoritas. Isso inclui frameworks como React & Vue, mas também bibliotecas como jQuery, com suporte adicional para navegadores móveis e datados .

Como o GSAP é capaz de consultar e animar praticamente qualquer tipo de elemento da web (de CSS a Canvas e objetos DOM) – você pode usá-lo para algo tão simples quanto um efeito giratório ou fazer tudo e criar experiências de site verdadeiramente dinâmicas.

A seção Showcase tem centenas de projetos de exemplo nos quais os desenvolvedores trabalharam. Confira tanto para inspiração, mas também para ver o que é possível com esta biblioteca.

Animação de exemplo GSAP

Veja o Pen Hulu Originals Intro por Hyperplexed (@Hyperplexed) no CodePen.

Recursos Adicionais GSAP

• Técnicas de animação incríveis com GSAP
• Criando Sequências de Animação de Site Elaboradas – Tutorial GSAP 3

#8 – Paper.js

Paper.js é uma biblioteca de animação com foco estrito na animação de gráficos vetoriais. Essa abordagem permite não apenas efeitos estáticos, mas também experiências dinâmicas interativas. Em particular, Paper.js é popular entre projetos de animação onde o usuário pode arrastar objetos, reorganizá-los e fornecer entrada personalizada.

Os objetos podem ser categorizados por meio de camadas, com cada camada tendo uma especificação de animação personalizada. Isso é útil quando você trabalha em estruturas complexas, permitindo remover/desabilitar certas camadas, a menos que solicitado pelo usuário.

Animação de exemplo Paper.js

Veja o Pen Filling Glasses – Paper.js de Fiorald Ismaili (@Fiorald) no CodePen.

Recursos adicionais do Paper.js

• Apagar Vetor Paper.js
• Ondas no Paper.js

#9 – Animações da Web

Esta biblioteca é uma porta JavaScript direta da API Web Animation. A biblioteca se integra diretamente com a especificação Element.animate() , permitindo que você use recursos de animação normalmente escritos usando lógica CSS. Os autores explicaram dizendo:

“Uma implementação JavaScript da API de Animações da Web que fornece recursos de Animação da Web em navegadores que não a suportam nativamente. O polyfill volta para a implementação nativa quando uma está disponível.”

Animações da Web Exemplo de Animação

Veja as Animações Imperativas da Caneta de Sam Thorogood (@samthor) no CodePen.

Recursos Adicionais de Animações da Web

• API de Animações da Web – APIs da Web | MDN
• Animações da Web Nível 2 | W3C

#10 – Próton

Os efeitos de partículas estão definitivamente em alta nas tendências modernas de web design. Não apenas os designers os implementam para efeitos de fundo, mas também para transições interessantes e até apresentações para projetos criativos. A biblioteca Proton é adaptada especificamente para as necessidades de dimensionamento rápido de efeitos de partículas criativas.

Você pode fazer coisas como criar efeitos de faísca e interações baseadas em colisão, mas também transformar texto em novas e emocionantes experiências de animação.

Animação de exemplo de próton

Veja a caneta meu emissor por matsu7089 (@matsu7089) no CodePen.

Recursos Adicionais de Próton

• Exemplos de motores de prótons
• Componente React para fundos de partículas

Resumo

O bom de muitas dessas bibliotecas é que elas já existem há algum tempo. Como tal, é relativamente fácil encontrar exemplos, mas também guias detalhados sobre como usar uma biblioteca específica em um contexto específico.

Acima de tudo, ajuda saber que tipo de objetivo você está tentando alcançar, principalmente se estiver trabalhando em animações que implementam dados em tempo real ou entrada baseada no usuário.

Em outras palavras, não existe o melhor . Cada biblioteca tem seus próprios pontos fortes e fracos. Para mim, eu provavelmente escolheria o GSAP porque ele é bem otimizado para uso em quase qualquer projeto de front-end imaginável.

Mas se estou fazendo um projeto menos ambicioso, uma biblioteca como o Popmotion é suficiente.