js

As melhores bibliotecas de animação JavaScript

Se você deseja atrair a atenção do visitante do site, o que pode ser melhor do que as animações? Usando os diversos mecanismos de aplicativos disponíveis gratuitamente na Web, você pode facilmente fazer com que os elementos do seu site desapareçam, retornem ou gritem. Na publicação de hoje, veremos como as bibliotecas de animação JavaScript podem ajudar com tudo isso.

Primeiro, um pouco sobre animações JavaScript

Uma coisa é adicionar animações simples que precisam de apenas uma ação (por exemplo, alternar). Para isso, você sempre pode usar animações CSS simples. Mas, para efeitos mais complexos ou avançados, o JavaScript é uma ferramenta melhor. Escusado será dizer que usar JavaScript para criar animações é mais desafiador do que usar CSS.

No entanto, o JavaScript pode lidar com coisas que o CSS não pode. Isso dá aos desenvolvedores muito mais poder para controlar animações complexas que precisam coordenar várias partes móveis.

As animações JavaScript são implementadas adicionando alterações graduais ao estilo de um elemento. Você pode adicioná-los em linha como parte do seu código ou incluí-los em outros objetos. Ao renderizar, essas alterações são chamadas por um timer. Além disso, você pode controlar a continuidade das animações ajustando o intervalo de tempo das alterações.

As melhores bibliotecas de animação JavaScript

Aqui está uma lista de bibliotecas de animação JavaScript que você pode usar para adicionar animações incríveis ao seu site :

Anime.js

Animejs

Vamos começar esta lista de bibliotecas de animação JavaScript com Anime.js. Esta biblioteca de animação leve possui mais de 35 mil estrelas no GitHub . Trabalhando a partir de uma única API poderosa, você pode usá-la para animar atributos HTML, CSS, JS, SVG e DOM. Com um sistema impressionante, ele pode simplificar a criação de ondulações, movimentos direcionais, efeitos de acompanhamento e sobreposição. Este sistema é utilizável em horários e propriedades.

Você pode fazer muito usando as funções internas de retorno e controle de chamada. Por exemplo, você pode reproduzir, pausar, controlar, reverter e disparar eventos em sincronia. Para ver o que mais é possível usando esta biblioteca, você pode visitar o Codepen .

Velocity.js

velocityjs

O Velocity.js combina o melhor das transições jQuery e CSS. Ele classifica perto de 17 mil estrelas no GitHub e se orgulha de usuários proeminentes como WhatsApp e Mailchimp . Looping, reversão, atraso, ocultação / exibição de elementos, matemática da propriedade (+, -, *, /) e aceleração de hardware, todos fazem parte dos recursos.

Você pode usar o Velocity.js para rolar as janelas do navegador . Pode funcionar com o jQuery carregado no seu navegador e independente dele, e até desfazer animações anteriores.

Popmotion

popmotion

Com quase 18 mil estrelas, o Popmotion é uma biblioteca de animação funcional para qualquer ambiente JavaScript. Ele pode funcionar com praticamente qualquer API que aceite números como entradas, como React , Three.js, A-Frame e PixiJS.

O Popmotion pesa apenas 11,7kB, mas ainda assim tem um impacto. Possui animações como quadros-chave, decaimento, linha do tempo para sincronizar várias instâncias e muito mais. Você pode escalonar qualquer série de animações ou funções, além de usar funções puras para compor suas próprias configurações.

Three.js

threejs

 

O Three.js encabeça esta lista de bibliotecas de animação JavaScript com mais de 60 mil estrelas no GitHub . Depende do WebGL criar e renderizar animações 3D no navegador.

Há uma tonelada de documentação para ajudá-lo e, depois de superar a curva de aprendizado, não há muito que você não possa realizar usando esta biblioteca. Primeiro, usando o editor Three.js, você cria uma cena. Depois disso, você poderá adicionar figuras geométricas e ajustar a iluminação e a câmera. O material, textura, objeto, cor e nebulização podem ser aprimorados e o arquivo final publicado no seu projeto.

GreenSock JS

greensock

O GSAP da GreenSock trabalha com um conjunto de pequenos arquivos JavaScript que tornam as animações excelentes em todos os principais navegadores. Ele combina facilmente várias propriedades de animação e elimina os erros do navegador.

As ações do GSAP incluem a criação de animações no Canvas e a animação de qualquer objeto em uma cena. Também revela progressivamente, transformando ou movendo qualquer objeto ao longo de um caminho. Para esse fim, ele trabalha com vários aplicativos de software, como SVGPlugins, PixiPlugin, WebGL, Adobe Animate e EaseJS. Sua estrutura modular ajuda a escolher apenas as funções necessárias. Com 8 milhões de usuários e mais de 10 mil estrelas no GitHub , esta poderosa biblioteca tem muito a oferecer.

 

AniJS

anijs

Entre as bibliotecas JavaScript nesta lista, o AniJS é um pouco exclusivo. Ele permite que você adicione animações a elementos em uma estrutura simples ‘tipo sentença’, ideal para pessoas novas na animação. Além disso, sua natureza inespecífica permite que quase todo mundo o use no design de rotina do UX.

No GitHub , o AniJS classifica mais de 3,5 mil estrelas. Ele não depende de nenhuma biblioteca de terceiros e geralmente ajuda a acelerar o desenvolvimento. Funciona igualmente bem no Android e iOS , e também em todos os navegadores populares.

Mo.js

mojs

Os gráficos em movimento têm um grande papel a desempenhar nas animações, e o Mo.js é uma opção com a qual você pode causar impacto. Com vários tutoriais e demonstrações para ajudar, os iniciantes podem não achar difícil criar formas geométricas e animações de tempo até o ponto.

As APIs podem parecer simples, mas você pode fazer muito com elas. No kit de ferramentas, você encontrará um Editor de curvas e um Editor de linha do tempo para ajudá-lo a criar suas animações, além de um Player para controlar suas animações. Existem diferentes módulos para escalonamento, flexibilização, linha do tempo e muito mais. Tudo isso ganha Mo.js perto de 16 mil estrelas no GitHub .

Vivus.js

vivus

Se você deseja imitar um desenho de caneta em uma tela em tempo real, acertará em cheio com Vivus. Permite animar SVGs dando a impressão de serem desenhados. Como não possui dependências, é rápido e leve.

Você pode escolher qualquer uma das animações disponíveis – Atrasada, Sincronização ou OneByOne. Senão, você também pode criar um script personalizado para desenhar seu SVG. Para obter mais flexibilidade, você pode substituir a animação de cada caminho usando uma função JavaScript simples. Mais de 13 mil usuários dão um polegar para esta biblioteca no GitHub .

ScrollReveal JS

scrollreaveljs

Se você deseja animar seus elementos da Web à medida que eles são visualizados, o ScrollReveal não decepcionará. Essa biblioteca de animação fácil de aprender tem zero dependências e mais de 18,5 mil estrelas no GitHub .

O ScrollReveal suporta diferentes tipos de efeitos e funciona bem com navegadores da web e móveis. Ele funciona intencionalmente com uma configuração básica, para que você possa usá-lo como uma tela para sua criatividade. Para maximizar o efeito das animações, os criadores aconselham que você a use com moderação.

Typed.js

typedjs

O Typed.js é uma biblioteca simples (mais um plugin, na verdade) para animar a digitação na tela. Depois de inserir qualquer sequência, o visitante pode assistir à digitação em uma velocidade definida. Além disso, você pode trabalhar no botão backspace e iniciar uma nova frase. Se você deseja permitir que visitantes com o JS desativado também o visualizem, basta colocar uma div HTML na página. Dessa forma, os bots e os mecanismos de pesquisa também visualizam as palavras digitadas.

Esta biblioteca classifica mais de 9,5 mil estrelas no GitHub . Usuários avançados incluem Slack e Envato.

 

Leia também: Plguns para transformar seu site wordpress em aplicativo