75 ferramentas de animação da web que você tem que tentar
A animação é uma daquelas tendências que tem suas garras nas interfaces da web. Sua popularidade flutua, mas sempre existe em algum lugar, como um componente essencial em qualquer site.
De pequenos e pouco visíveis spinners de carregamento a transições de página inteira como uma experiência de filme, animação atinge em todas as áreas dos nossos projetos.
Para designers que desejam incorporar animação, há uma grande variedade de opções disponíveis. De transições puramente decorativas que apenas simplificam as interfaces, para efeitos significativos que melhoram as experiências do usuário, nossa coleção abrange ferramentas que permitem criar animações de várias escalas e para diferentes finalidades. Aqui estão 75 plugins e bibliotecas que você vai querer conferir; você não vai usá-los todas as vezes, mas cada um tem um caso de uso ideal, e alguns você usará repetidamente ...
1. Animate.css
Animate.css é uma biblioteca fundamental de animações cruzadas entre navegadores que serve de base para muitas soluções. De saltos e desvanecimentos clássicos a reviravoltas modernas e efeitos únicos, é capaz de satisfazer as necessidades de praticamente qualquer projeto.
2. Animações Mágicas
Animações Mágicas concentra-se em efeitos excepcionais que dão à interface um gosto especial. Embora a biblioteca não possa se orgulhar de uma imensa diversidade, é suficiente enriquecer a experiência do usuário.
3. Bounce.js
Bounce.js é um pequeno playground onde você pode realizar experimentos com animações baseadas em CSS. Basta adicionar um componente e ajustar as configurações para trazer tudo para viver. E no final, exporte o arquivo css.
4. Anijs
Anijs auxilia na manipulação de animação de maneira intuitiva, usando instruções simples como If, On, Do, To. O melhor é que você é bem-vindo para usar suas próprias classes ou mesmo o Animate.css (mencionado anteriormente) para criar algo incrível.
5. Snabbt.js
Snabbt.js é famosa por sua abordagem minimalista que traz animações rápidas. Ele pesa apenas 5kb; no entanto, é capaz de dar a qualquer componente um impulso visível traduzindo, girando, inclinando, redimensionando ou redimensionando sua forma.
6. Kute.js
Kute.js é um mecanismo de animação com excelente desempenho. É rápido e compatível com diferentes navegadores graças a um conjunto de alternativas viáveis que lidam com navegadores legados. Ele vem com vários plugins para fornecer um ambiente de trabalho eficiente.
7. Velocity.js
Velocity.js é um mecanismo de animação que, à primeira vista, pode parecer pouco representativo. No entanto, seu arsenal inclui todos os tipos regulares de animação, como morphing, loop, easing, rolagem, etc. É rápido e independente de jQuery.
8. Pintor de Linha Preguiçosa
As animações de caminho SVG são facilitadas com Pintor de Linha Preguiçoso . Pegue a sua linha de arte do Illustrator no formato SVG e faça o upload para o conversor. Este último irá gerar um arquivo jQuery que lida com o processo de animação. Se for necessário, você pode fazer alterações diretamente no código.
9. SVG.js
SVG.js oferece um ambiente intuitivo onde você pode manipular e animar SVGs. É pequeno e independente, com sintaxe limpa e API unificada. Faça o que quiser: animar tamanho, cor, posição, caminhos de texto; transformar componentes; ligar eventos etc.
10. Motion UI
Ao contrário dos exemplos anteriores, IU de movimento aproveita SASS para criar animações CSS intrigantes. Há toda uma série de transições e efeitos predefinidos que podem ser aplicados a qualquer componente HTML. Tudo funciona em todos os navegadores populares, exceto no IE9.
11. Espere! Animar
Esperar! Animar permite que você opere atrasos e espere em animações de maneira simples. Calcule todos os intervalos de tempo necessários através do pequeno painel e construa uma animação natural sem agitação.
12. Dynamics.js
Dynamics.js é uma biblioteca de JavaScript que oferece 9 efeitos padrão para brincar. Você pode especificar a duração, a frequência, o atrito, o tamanho da antecipação e a força de antecipação para obter animações baseadas na física da vida real.
13. Choreographer.js
Com Choreographer.js Ao seu alcance, você não deve ter medo de animações complexas, já que essa biblioteca JavaScript faz todo o trabalho pesado. Embora lide com uma quantidade limitada de animações, ele permite que você trabalhe com funções personalizadas para que você possa criar suas próprias obras-primas.
14. Anime.js
Com um conjunto impressionante de recursos que permite encadear várias animações, sincronizar diferentes instâncias, desenhar linhas, transformar objetos, criar animações individuais, etc. Mecanismo de animação JavaScript irá surpreendê-lo com o seu potencial.
15. Mo.js
Mo.js significa movimento para a Web. É incrivelmente rápido e ao mesmo tempo intuitivo e simples. Crie trilhas atraentes, transições modais de diálogo inesperadas, layouts de bolhas, animações de estouro e muito mais.
16. Sequence.js
Sequence.js é uma estrutura orientada por CSS para criar animações baseadas em etapas sensíveis ao toque. É ideal para criar sliders, apresentações, banners e outros tipos de componentes dinâmicos. Entre os vários planos premium, você encontrará um gratuito que concede a você uma licença pessoal de código aberto.
17. Shifty
Shifty é um mecanismo de interpolação com um forte foco em otimização, desempenho rápido, flexibilidade e extensibilidade. É considerado uma alternativa viável ao GreenSock, mas com uma interface muito mais simples.
18. é terça-feira
terça é uma biblioteca de animação independente que pode ser usada em conjunto com outras bibliotecas. Isso faz com que as entradas e saídas pareçam suaves, sutis e elegantes. Ele oferece uma variedade de efeitos padrão, como fade-ins, expand-ins, shrink-ins, drop-ins, etc.
19. CSS Animate
CSS Animate é um playground primitivo que gera um código válido e livre de desordem para qualquer animação regular. Definir nome, classe, propriedades de animação, propriedades de quadros; manipule a linha do tempo e adicione marcadores: em uma palavra, ajuste tudo o que você precisa para produzir uma animação regular baseada em quadro-chave.
20. Vivus.js
Envio com três tipos de animação: atrasar, sincronizar e revelar um por um Vivus.js desenhará um SVG de uma maneira suave e natural, tornando o surgimento do componente uma experiência adorável. Você pode ir para animações predefinidas ou usar suas próprias funções personalizadas.
21. Bonsai.js
Bonsai.js é uma biblioteca JavaScript para manipulações gráficas avançadas. Tem um renderizador de API e SVG bem simples. Use seu editor on-line para fazer um test drive, familiarize-se com a sintaxe e faça o download de alguns exemplos para começar.
22. GSAP de GreenSock
GSAP é uma poderosa plataforma de animação voltada para animações profissionais. Tem inúmeros plugins e utilitários que são responsáveis por vários tipos de animações. Consiste em BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, etc.
23. Popmotion
Popmotion é outra alternativa leve e acessível para Greensock em nossa coleção. É um motor de movimento com um controle total sobre cada quadro. Tem uma interpolação avançada, mistura de cores e um monte de funções e ações para construir soluções complexas.
24. Tween.js
Uma grande quantidade de coisas incríveis é feita com a ajuda de Tween.js . É um motor de interpolação de ponta com vários parâmetros para controlar a animação. Também é uma excelente solução para aprimorar projetos conduzidos pelo Three.js.
25. Hover.css
Hover.css A biblioteca pode ser dividida em várias categorias básicas: transições 2D, transições de fundo, animações de ícones, transições de borda, transições de sombra e brilho, balões de fala e cachos. Aplique esses efeitos a qualquer elemento em seu design sem restrições.
26. Trânsito
A lista de recursos de Transito é bastante curto, mas inclui as coisas mais vitais para a construção de transformações 2D e 3D. Por exemplo, você pode especificar atrasos e durações, adicionar função de atenuação, usar valores relativos e mais.
27. Foguete
Foguete é uma solução para embelezar o movimento de um objeto de um ponto para outro. Existem 8 efeitos especiais, como pulsação ou rotação, que dão a esta jornada um delicioso prazer .
28. Animo.js
Animo.js é uma ferramenta relativamente pequena para lidar com transições e animações. Ele tem um conjunto de plugins extras, como contagem regressiva, rotação e animação, que enriquecem a biblioteca e facilitam muito a obtenção do efeito desejado.
29. Shift.css
Shift.css é uma estrutura para criar animações em um contêiner que afeta elementos aninhados e adaptáveis. Existem 15 tipos de animações padrão, incluindo mover, entrar, sair, soltar e outros.
30. CSShake
CSShake vem com 11 classes que forçam os elementos do seu DOM a tremer. Você pode escolher direção (horizontal ou vertical), tipo (fixo, louco, constante, pedaço), intensidade (lenta ou dura) ou apenas ir para uma opção padrão.
31. Açafrão
Se você preferir usar mixins para manipular animações e transições de maneira fácil e rápida, Açafrão é certamente para você. É uma compilação de métodos reutilizáveis que são escritos no Sass, onde você pode definir variáveis e parâmetros.
32. CSSynth
CSSynth é um pequeno editor onde você pode apreciar a beleza da sincronização. A animação é baseada em um intervalo de quadrados cujo número você pode especificar no painel esquerdo. Selecione um efeito, defina o atraso e escolha se deseja baixar o código de resultado no formato CSS ou SCSS.
33. Ceaser
Ceaser é uma ferramenta antiga e comprovada para a realização de experimentos com a animação clássica de atenuação. Há um número de variantes começando de linear e terminando com o personalizado. Dois parâmetros extras (duração e efeito) ajudarão a aperfeiçoar o resultado.
34. Morf.js
Para levar a ferramenta acima mencionada um pouco mais longe, você pode tentar Morf.js . Oferece transições baseadas em funções de atenuação personalizadas. Existem quase 40 opções pré-definidas que você pode adaptar rapidamente ao seu projeto.
35. Voxel.css
Voxel.css foi criado especificamente para renderizações em 3D. Sua implementação simples permite que até os novatos tenham acesso ao CSS 3D. A biblioteca tem 4 classes importantes: Scene, World, Editor e Voxel que ajudam a construir jogos e aproveitar a ação.
36. Repaintless.css
Repaintless.css usa a técnica FLIP para tornar a animação rápida e suave. Embora isso requer algumas melhorias; no entanto, é um começo perfeito para aqueles que prestam uma atenção especial ao desempenho.
37. MixItUp
Misture é uma biblioteca para embelezar a filtragem, classificação, inserção e outras ações padrão inerentes às interfaces da maioria, como portfólios, galerias, etc. É livre de dependência e promete fornecer um alto nível de desempenho.
38. Wallop
Como o título afirma, Wallop é para mostrar e esconder as coisas de uma maneira agradável; previsivelmente, seu uso geral está na construção de controles deslizantes. No entanto, ninguém impede que você explore seu potencial e crie algo interessante e intrigante.
39. Ramjet
Ramjet transforma um elemento em outro com a ilusão de movimento que se realiza por meio da função de atenuação. É capaz de trabalhar com elementos DOM, SVGs, imagens estáticas ou imagens animadas.
40. jQuery DrawSVG
Baseado em um poderoso mecanismo de animação jQuery, ele desenha com eficiência todos os caminhos dentro do SVG, dando à imagem uma entrada dramática e ao mesmo tempo elegante. O procedimento é simples: adicione o plugin para a página, inicialize-a e execute a animação.
41. Animatic.js
Animatic.js é uma ótima solução entre navegadores com regras de física integradas que emprega transformações CSS, transformações 3D e JavaScript para dar vida a tudo. Sua principal tarefa é diminuir seus esforços para animar vários objetos de uma só vez. Você pode criar animações paralelas e seqüenciais, ajustando cuidadosamente a função de duração, atraso e atenuação.
42. Move.js
Move.js é uma ferramenta supersimplificada para criar animações regulares, como dimensionar, inclinar, mover ou traduzir. Cada animação pode ser melhorada com a função de facilidade clássica.
43. Eg.js
Eg.js é uma coleção cuidadosamente montada de vários efeitos e elementos dinâmicos que visam melhorar as interações nas interfaces. Existem 8 componentes poderosos que selecionam tarefas básicas e 6 principais métodos e eventos para outros propósitos.
44. GFX
GFX é uma biblioteca de animação 3D atraente para criar animações CSS3 de forma programática. Ele funciona com o jQuery, tornando muito mais fácil produzir o resultado desejado. Você pode brincar com a escala, rotação, tradução, inclinação e algumas outras coisas.
45. Estilete
Embora seja dito que Estilista é uma ferramenta divertida, mas certamente impressionará você com suas capacidades. O centro de controle possui 4 guias que permitem ajustar os quadros-chave, facilitar, exportar opções e HTML, tornando as animações complexas mais fáceis.
46. Iconate.js
Iconate.js injeta vida nas transformações dos ícones, melhorando a transição entre dois itens por um agradável efeito de acompanhamento. Ele funciona muito bem não apenas com o Font Awesome, mas também com o Glyphicons e até com o seu próprio conjunto personalizado de pictogramas.
47. AnimateMate
AnimateMate é uma pequena ferramenta para produzir e exportar animações de pequena escala a partir do seu ambiente do Sketch. Não é algo extravagante, mas permite que você jogue com keyframes, adicione funções de atenuação, controle sequências e um pouco mais.
48. CAAT
CAAT (que significa Canvas Advanced Animation Toolkit) é um framework que forma um conjunto poderoso com JavaScript. Seu conjunto de ferramentas apresenta cenas, tecnologias de renderização múltipla, máscaras de recorte, pacote padrão de comportamentos, etc.
49. Granim.js
Granim.js é uma pequena biblioteca JavaScript para apimentar interfaces com peças centrais interativas baseadas em gradiente. Pode ser uma animação gradiente radial padrão, gradientes dinâmicos aplicados acima do fundo da imagem ou gradientes em movimento combinados com máscaras de imagem.
50. Animista
Criado por Ana Travas, Animista é um playground para realizar experimentos com um monte de animações orientadas por CSS predefinidas convencionais e incomuns. Escolha a duração, a função de temporização, o atraso, a contagem de iterações e algumas outras opções para examinar o resultado.
51. Obnoxious.css
Obnoxious.css vem com 5 animações baseadas em CSS exclusivas que forçam os elementos da interface a tremer, girar, ampliar, imitar o efeito strobe ou alterar o peso do tipo de letra. Tudo o que você precisa fazer é aplicar a classe preferida ao div desejado.
52. Animatelo
Animatelo inclui uma tonelada de efeitos dinâmicos atraentes que foram emprestados do famoso e poderoso Animate.css, fornecendo uma maneira mais fácil de aplicá-los. Graças ao polyfill da Web Animations API, ele é suportado por todos os navegadores modernos.
53. Foxholder
Foxholder é um pacote de 15 efeitos minúsculos que foram criados especificamente para melhorar as interações do usuário com o formulário. Cada método enfatiza o campo de entrada à sua maneira: ele pode tornar a borda mais brilhante, adicionar pistas visuais, definir texto em movimento e muito mais.
54. Rhythm.js
Rhythm.js é tudo sobre animações minúsculas inspiradas no disco. Esta biblioteca JavaScript inclui efeitos que imitam algum tipo de movimento de dança. Existem quase 20 opções que adicionarão boogie-woogie ao seu site.
55. Colorido.js
Muito parecido com o Granim.js, este plugin com JavaScript foi criado para manipular a propriedade da cor. Ajuda a mudar dinamicamente os tons e a opacidade do fundo e do texto, bem como a criar gradientes radiais, lineares, diagonais e horizontais não estáticos.
56. Barba.js
Barba.js aproveita o PJAX (uma técnica baseada em ajax) para aliviar os usuários da chamada troca de atualização rígida entre as páginas. Apenas esconde o recipiente antigo e mostra o novo recipiente de uma maneira sutil e agradável aos olhos.
57. ScrollReveal.js
ScrollReveal.js é uma ferramenta popular para criar animações de rolagem. Com o seu método principal reveal () você pode gerenciar diferentes animações e controlar todos os seus aspectos padrão. O melhor é que funciona bem com navegadores da Web e móveis.
58. Scrollanim
Scrollanim é menos sofisticado, mas mais prático e mais simples de usar, em vez do exemplo anterior. Embora favoreça o CSS3, ele permite que você adicione animações usando a API JavaScript para produzir animações acionadas por rolagem. Ele possui várias soluções pré-criadas que você pode introduzir rapidamente em seu projeto.
59. ScrollTrigger
Enquanto as duas soluções anteriores se concentram principalmente na rolagem vertical tradicional, este é para construir sites horizontais longos. Ele permite que você construa interfaces dinâmicas no plano do eixo x, povoadas por belas animações CSS3, usando uma sintaxe bastante primitiva.
60. Force.js
Force.js é uma pequena solução que é desprovida de enorme funcionalidade e riqueza de opções. No entanto, é ideal para tarefas regulares, como definir objetos em movimentos sutis ou facilitar a rolagem. Como de costume, aliviando mentiras em seu núcleo, tornando a animação limpa e organizada.
61. AOS
AOS significa animado em pergaminho. Ele faz o que diz - fornece a você um monte de efeitos pré-definidos animados que são acionados por um evento de rolagem. Se você quer dar seções uma entrada dramática sem profundamente cavando em código, então é certamente para você.
62. Rellax
Raxax é para bela paralaxe. É uma biblioteca JavaScript light vanilla para dar um toque sutil de dimensão 3D às interfaces.
63. Tilt.js
Tilt.js produz intrigante efeito de inclinação impulsionado por paralaxe. Ele moverá os objetos para uma posição inclinada, imitando 3D em um plano 2D básico. Você pode fixar um eixo, tornando o efeito mais atraente e interessante, ou recriar algum tipo de brilho ou sensação de flutuação.
64. Transformar-quando
Transformar quando é uma ótima solução para projetar experiências de contar histórias com um alto desempenho e suporte nativo para dispositivos móveis. Ele aposta em dois parâmetros vitais: tempo e posição de rolagem, tornando a aventura do usuário através da interface vigilantemente controlada ao seu lado. Funciona com elementos SVG e HTML regulares.
65. Animação CSS3
este é um gerador old-school com uma visualização ao vivo para criar animações CSS3 básicas. Existe um centro de controle padrão onde você pode ajustar a duração da transição, número de iterações, funções de temporização etc. A rotina é simples: ajuste tudo, copie os códigos HTML e CSS resultantes e cole-os em seu projeto.
66. Curve.js
Curve.js respira a vida em linhas, fazendo-as “dançar” e girar como uma onda. Use-o para criar um resumo de planos de fundo ou peças centrais com inspiração geométrica.
67. Animator.js
Animator.js Diz-se que é flexível, eficiente e leve. Ele oferece a maneira mais fácil de gerenciar os quadros-chave e gerar animações CSS de várias escalas. Também é livre de dependência.
68. Cel-animação
Cel-animação é um mix de Sass que lhe dá controle sobre os keyframes tradicionais. Você pode definir SVG em movimento ou qualquer tipo de elemento HTML.
69. Scrollissimo
Scrollismo foi criado para trabalhar em parceria com Greensock habilmente e suavemente animando objetos na rolagem do usuário. Com um plug-in adicional de JavaScript para gadgets com tela sensível ao toque, ele abrange vários dispositivos.
70. jqClouds
jqClouds é um plugin primitivo que gera e preenche um design com nuvens em movimento que pairam sobre a interface. Você pode alterar o conceito, substituindo nuvens por qualquer outro objeto, para dar a uma interface estática um sabor dinâmico particular.
71. Animação de cor
Como você adivinhou, esta ferramenta é para animação de tom e transparência de fundo, borda ou texto. Na verdade, ele funciona com a cor de qualquer objeto que tenha como propriedade.
72. Flubber
Para excluir saltos repentinos e metamorfoses drásticas que podem ocorrer quando um objeto é convertido em outro, você pode usar Flubber . O plugin oferece interpolações suaves entre as duas formas. O único inconveniente é que ele só funciona com gráficos 2D.
73. Particles.js
Se você gosta de animação de partículas lúdicas - uma escolha popular hoje em dia - você pode usar este gerador acessível . Ele é baseado em uma biblioteca JavaScript viável que faz todo o trabalho. Defina preferências como cor, número, forma, tamanho, opacidade, etc. e simplesmente exporte o resultado.
74. Animação de linhas 3D com Three.js
Este é um pequeno script que não possui todas as capacidades dos plugins acima mencionados. No entanto, adiciona à sua interface um belo fundo animado cheio de animação de partículas. Você pode configurar cores, linhas, opacidade e algumas outras opções para se misturar ao seu ambiente.
75. Three.js
Por último mas não menos importante, Three.js - uma biblioteca poderosa e versátil que está por trás de inúmeros sites impressionantes. É adequado para projetos simples e complexos. Ele permite que você trabalhe com
