13 bibliotecas de animação JavaScript para designers

Criar um site ou página com animação não significa necessariamente construir tudo em algum aplicativo ou estrutura de animação grande e complicado. Mesmo algo tão simples como animar um efeito de foco de link com CSS adiciona um pouco de brilho visual.

CSS transições e transformações podem ser combinadas para criar efeitos fantásticos, incluindo limpezas de tela no estilo Star Wars. Mas talvez seja necessário considerar o uso de JavaScript para maior flexibilidade e controle.

Para um designer, especialmente aquele que não faz muita codificação, essa ideia pode parecer um pouco desanimadora. Felizmente, no entanto, há várias bibliotecas JavaScript projetadas especificamente para criar efeitos animados. Você precisará entrar um pouco no código, mas o objetivo dessas bibliotecas é que alguém já fez a maior parte do trabalho pesado para você. Se você puder seguir instruções simples, poderá usar bibliotecas JavaScript para aprimorar seus designs.

Antes de começar a procurar uma biblioteca, é bom ter claro o que você está procurando. Pense em quais efeitos de animação você deseja e, em seguida, divida-os em suas partes constituintes. Todas as animações simples se dividem em esmaecimento, deslizamento, dimensionamento ou rotação, controladas por temporizadores que lidam com atrasos, easing e ordem de reprodução e gatilhos (eventos) – como rolagem, toque ou carregamento de página – que iniciam e param a animação correndo. Quanto mais dessas funções você combinar, mais complexa a animação se tornará.

Agora que já resolvemos isso, vamos dar uma olhada em algumas bibliotecas, começando com as mais simples e passando para as ofertas mais desafiadoras (mas ainda gerenciáveis).

AniJSGenericName

Se você é novo em animação ou JavaScript, AniJS é um ótimo lugar para começar. É um IU biblioteca de interação que permite usar JavaScript para controlar CSS animações sem escrever nenhum JavaScript. Ele transforma o JavaScript em ​‘linguagem simples — if: event, do: action, to: element. Como isso também imita a sintaxe básica do JavaScript, pode ajudar um não-cidadão a se sentir confortável com js. Além disso, você pode ficar mais avançado com ele, se quiser.

Existem muitas demos e exemplos, e tem uma página de recursos – a AniCollection – que tem uma tonelada de animações prontas que você pode baixar e usar.

Se você deseja aproveitar as vantagens do JavaScript, mas não se sente pronto para se aprofundar nos recursos abaixo, o AniJS é para você.

Microbibliotecas

Outra maneira de começar com a animação é tentar uma biblioteca que se concentre em uma coisa. Essas microbibliotecas têm a vantagem de serem pequenas e, por serem limitadas em sua funcionalidade, geralmente são fáceis de implementar. Aqui estão algumas sugestões para você experimentar:

ScrollReveal

ScrollReveal faz praticamente o que diz na lata – os elementos são animados à medida que aparecem ou saem da janela de visualização. Este é um efeito popular que pode encantar o usuário enquanto é sutil.

Uma possível desvantagem é que você deve carregá-lo no cabeçalho do documento para evitar um conteúdo ​‘piscar.’ Isso é abordado em sua documentação.

AOS

AOS significa animate on scroll, e é para – sim, você adivinhou – animar elementos direcionados enquanto o usuário rola. Este efeito popular pode ter uma função prática e adicionar interesse visual.

Granim.js

Granim.js permite animar gradientes de cores. Você pode controlar cores, direção e modos de mesclagem e usá-los com máscaras de imagem. Inicialmente, este parece puramente decorativo, mas você pode aplicá-lo às interações do usuário, como eventos do mouse.

Digite

TypeIt cria animações com efeito de máquina de escrever. Esse é um efeito que vemos com bastante frequência em sites de portfólio. Isso ajuda a envolver o usuário e pode auxiliar na hierarquia de conteúdo, chamando a atenção para o texto animado.

Vivus

Vivus anima SVGs, fazendo com que pareçam estar sendo desenhados. Este pode ser um pouco mais complicado de entender, mas os resultados são excelentes.

Notação aproximada

Notação aproximada adiciona anotações de texto animadas e decorações. Você pode adicionar colchetes desenhados à mão, tachados, sublinhados, realces, efeitos de risca e círculos. Você também pode combinar diferentes efeitos.

barba.js

O barba.js anima as transições entre as páginas, dando a impressão de um aplicativo de página única. Esteja avisado, sua documentação pressupõe familiaridade com js sintaxe e aconselha você a se sentir confortável com ela antes de tentar usá-la.

TweenJS

TweenJS é uma biblioteca de interpolação que suporta a interpolação de propriedades de objetos numéricos e CSS propriedades de estilo. Os comandos podem ser encadeados para criar interpolações complexas.

É perfeitamente possível usar duas ou mais microbibliotecas simultaneamente. Eles devem ter namespaces para que não entrem em conflito uns com os outros. Se você quiser usar duas ou mais bibliotecas na mesma página da Web, concatene todo o JavaScript — ou seja, coloque o máximo de código possível no mesmo arquivo para que seja apenas uma solicitação do servidor.

Bibliotecas Maiores

Se você achar que precisa usar mais de 4 ou 5 micro bibliotecas de uma só vez, talvez seja hora de olhar para uma biblioteca um pouco mais extensa, ou mesmo uma estrutura inteira, que pode lidar com tudo o que você deseja fazer por conta própria.

Esteja preparado para que as coisas fiquem um pouco mais complicadas agora, mas essas bibliotecas de animação tendem a ter boa documentação e suporte da comunidade.

GSAP

GSAP, também conhecida como GreenSock, é uma das bibliotecas JavaScript mais populares para animação. Ele pode animar quase tudo que o JavaScript pode acessar, incluindo CSS propriedades e variáveis, propriedades de objetos personalizados, SVGstrings complexas e componentes React.

É modular, usando plug-ins para adicionar funcionalidades opcionais ao núcleo. Isso significa que você adiciona apenas o que realmente precisa, sem acabar com nenhum código estranho. É muito rápido, robusto e leve, dada a sua potência.

Pode parecer um pouco intimidador para quem não está familiarizado com JavaScript, mas a documentação é direta e abrangente, e o suporte é bom.

Animé.js

Outra biblioteca de animação muito popular é Animé.js. Ele pode atingir CSS propriedades, SVG, DOM atributos e objetos JavaScript. Ele possui um sistema de escalonamento integrado para facilitar a sobreposição de animações e ótimos controles de tempo.

Novamente, pode parecer um pouco complicado, mas a documentação é muito bem feita, com demonstrações claras ao lado de cada item abordado.

popmotion

O Popmotion é escrito em Typescript, mas é portátil para qualquer ambiente JavaScript. É poderoso, com suporte para quadro-chave e animação de mola para números, cores e strings complexas. Ao mesmo tempo, é minúsculo e todas as suas funções são importáveis ​​individualmente, portanto, não há código desnecessário.

mo.js

Mo.js tem um declarativo API para facilitar a criação de animações gráficas personalizadas. É modular, com componentes embutidos que você pode usar como ponto de partida. O módulo Burst é particularmente agradável.

Como animar páginas da web

As animações da Web tendem a se enquadrar em duas categorias principais:

• Incidental: onde as animações são reproduzidas independentemente do que o usuário faz. As animações incidentais não são necessariamente apenas decorações; eles podem ser apresentações de slides ou demonstrações.
• Interativo: que são causados ​​por eventos como passar o mouse, rolar e tocar. Eles podem ser usados ​​para ajudar a orientar os usuários e incentivá-los a realizar ações.

Quando as animações são parte integrante do IUacionados por eventos de interação do usuário, eles podem melhorar o envolvimento do usuário, pois o usuário sente que controla o que acontece na tela.

Use-os para reforçar o design, para encorajar e tranquilizar os usuários e, quando necessário, para encantá-los.

Quando bem usada, a animação adiciona uma dimensão extra ao design, mas você não deve usá-la para compensar a má IU projeto. Se você depende inteiramente da animação para fazer um design funcionar, precisa repensar o design.

A animação deve ser apenas um aprimoramento, tanto estética quanto funcionalmente. Você deve certificar-se de que seu site ainda funcione se as animações falharem. Se, por qualquer motivo, seu JavaScript falhar ao carregar ou não for executado, o usuário ainda poderá ver o conteúdo e executar qualquer ação.

Na grande maioria dos casos, menos é definitivamente mais. Bombardear o usuário com muito movimento torna-se irritante. Você também deve manter suas animações consistentes e esteticamente coesas.

Do lado técnico, o desempenho é fundamental, tanto em termos de animação em si quanto da página como um todo. Você quer manter as coisas o mais leve possível. Se você estiver fazendo algo direto, considere escrevê-lo em JavaScript vanilla (sem nenhuma dependência), pois essa será a opção mais leve. Por outro lado, se você não conhece JavaScript, o que você salva em tamanho de arquivo não vale a pena em comparação com o que você economizaria em tempo e energia usando uma microbiblioteca.

Há algumas coisas que vale a pena considerar quando se trata de arquivos JavaScript e problemas de tamanho. Isso se aplica ao JavaScript em geral, não apenas a animações ou bibliotecas.

As microbibliotecas tendem a estar por perto 5 para 7kb Gzipped, mas mesmo as bibliotecas mais extensas que vimos aqui estão sob 30kb Gzipado. Quando você compara isso com o tamanho dos arquivos de imagem, é bastante insignificante. Mesmo em comparação com CSS arquivos, não é exatamente enorme.

O JavaScript geralmente é carregado como um aprimoramento progressivo na parte inferior do documento. Isso significa que ele carrega por último e não bloqueia o restante do carregamento da página, ao contrário CSSque é carregado na cabeça.

Já mencionamos isso, mas vale repetir: carregue o mínimo de arquivos externos possível. Se você estiver usando mais de uma microbiblioteca, concatene-as. Quanto menos chamadas para o servidor, mais rápido será o tempo de carregamento.

Uma das maiores bibliotecas que vimos aqui, GreenSock, contém código extra para garantir que as animações sejam executadas sem problemas. Portanto, alguns milissegundos extras no carregamento inicial compensam para que os usuários não se distraiam com o baixo desempenho da própria página.

Se você estiver tendo problemas com o tempo de carregamento, verifique primeiro seus arquivos de imagem: a otimização de imagens provavelmente economizará muito mais do que cortar algum JavaScript. Além disso, certifique-se de que seu CSS os arquivos são tão leves quanto possível. Faça o melhor uso possível do cache do navegador. Depois que um arquivo é carregado, ele fica disponível em todo o site. E reduza ao mínimo as chamadas para o servidor. Para velocidade máxima de carregamento, use um CDN para seus recursos externos.

Tamanho não é a mesma coisa que inchaço – inchaço é o que você não precisa.

O tamanho é importante, mas a eliminação de código redundante possivelmente é ainda mais importante.

Você deve sempre usar a menor biblioteca possível para eliminar o código não utilizado, até porque o Google toma nota do código não utilizado. Isso pode contar contra você. Muitas dessas bibliotecas são modulares e permitem que você carregue apenas o que realmente precisa.

Essas ferramentas não são apenas para não codificadores. Eles também economizam muito tempo para desenvolvedores front-end.

Se você deseja usar animação em seus designs regularmente, deve se familiarizar com o JavaScript. Você não precisa ser um especialista, mas deve ser capaz de entender como funciona. Além disso, ter uma compreensão básica do que está acontecendo nos bastidores não faz mal.