Biblioteca de animação: quando o movimento ajuda o site

Um cliente pede uma landing page "com cara de site de agência". O desenvolvedor abre o template, pede a uma ferramenta de IA umas animações e entrega: cada bloco sobe ao rolar, o título digita letra por letra, os cards giram no hover. Fica parecido com outras cem páginas que saíram do mesmo processo.

Duas semanas depois, o relatório de Core Web Vitals mostra a interação piorando no celular. Um usuário escreve dizendo que ficou enjoado na página de preços.

Os dois problemas têm a mesma origem: animação em elementos que não precisavam de movimento. A biblioteca de animação escolhida pouco importa nesse caso.

Movimento só ajuda quando explica alguma coisa: uma mudança de estado, uma hierarquia ou a continuidade entre duas telas. O resto pesa no INP e incomoda quem pediu menos movimento.

Por que todo site parece igual

Template e geração de código por IA aceleram muito a primeira versão de um site. O efeito colateral é a repetição: os mesmos efeitos de entrada, na mesma ordem, com a mesma duração. Quem já viu dez landing pages de SaaS reconhece o padrão no primeiro scroll.

A reação natural é adicionar mais movimento para diferenciar. Isso costuma piorar a situação, porque o visitante não lembra de quantas coisas se mexeram. Ele lembra se entendeu o produto e se o botão respondeu quando ele clicou.

O ponto de partida mais útil é o propósito. Antes de escolher uma biblioteca de animação, liste o que cada movimento vai explicar. Um painel que desliza da direita mostra de onde ele veio e para onde volta. Um contador que sobe deixa claro que o número mudou, e um card que cresce ao ser selecionado indica qual opção está ativa. Se você não consegue completar a frase "este movimento mostra que...", o movimento é decoração.

Esse raciocínio vale também para quem faz vibe coding: a IA gera animação com facilidade, e a decisão de manter ou cortar continua sendo sua.

O que o CSS já resolve sem biblioteca

Muita animação que hoje chega com uma dependência de JavaScript sai com poucas linhas de CSS. Transições de cor e tamanho, hover, abertura de acordeão, entrada de um modal e animações com @keyframes rodam no navegador sem custo extra de download.

O navegador também ganhou a View Transitions API. Segundo a documentação da MDN, ela cria transições animadas entre estados do DOM numa aplicação de página única e também na navegação entre documentos de um site de várias páginas. Esse segundo caso, a transição entre páginas, antes exigia JavaScript considerável ou simplesmente não era possível.

A regra que funciona: comece no CSS e só adicione uma biblioteca quando bater num limite real. Os limites mais comuns aparecem em sequências com muitas etapas encadeadas, em que controlar atrasos à mão vira bagunça, e em animação controlada com precisão pela posição da rolagem. A física de mola, aquele movimento que desacelera de forma natural, também pede ajuda de fora.

Comparativo: qual biblioteca de animação usar

Cada biblioteca de animação resolve um problema diferente, e o CSS entra na comparação como linha de base. A tabela compara as quatro mais citadas em peso, licença e melhor uso.

Alguns detalhes que a tabela não mostra. O GSAP ficou 100% gratuito na versão 3.13, publicada em 29 de abril de 2025, incluindo os plugins bônus como SplitText e MorphSVG, que antes eram exclusivos do clube pago. O anúncio credita a Webflow pela mudança. A licença, chamada Standard "No Charge" GSAP License, não é open source: ela proíbe usar o GSAP em ferramentas que permitam criar animações sem código e concorram com o construtor visual da Webflow. Para um site comum, essa restrição não tem efeito. A página de preços do GSAP lista, entre os plugins incluídos, ScrollTrigger, Draggable, Flip e MotionPath. Para animação ligada à rolagem, o plugin indicado é o ScrollTrigger, que amarra uma linha do tempo à rolagem, com início e fim definidos por posição na página.

O Motion era o Framer Motion. Hoje tem versões para React, JavaScript e Vue, licença MIT, e um produto pago à parte, o Motion+. A documentação diz que o motor dele roda as animações com a Web Animations API do navegador e recorre a JavaScript para o que a API não cobre, como física de mola.

O Lottie, mantido pelo Airbnb, interpreta animações do Adobe After Effects exportadas como JSON pelo plugin Bodymovin e as reproduz na web, no Android, no iOS e no Windows. O Anime.js fica fora da tabela por ser uma alternativa mais leve ao GSAP para sequências: a página oficial informa 24,50 KB no pacote completo e o repositório traz licença MIT.

O custo em JavaScript e no INP

Uma biblioteca de animação tem dois custos de performance, e eles aparecem em métricas diferentes.

O primeiro é o download. Todo JavaScript que entra no carregamento inicial precisa ser baixado, interpretado e executado antes de a página ficar pronta. Importe só os módulos que você usa e carregue a biblioteca apenas nas páginas que animam alguma coisa. Se a animação fica abaixo da dobra, dá para carregar a biblioteca de animação depois que a página terminou de abrir, sem atrasar o conteúdo principal.

O segundo é a execução. Animação que roda enquanto a pessoa tenta clicar disputa a thread principal com o clique. O resultado aparece no INP, a métrica de resposta à interação que substituiu o FID como Core Web Vital em 12 de março de 2024. O web.dev considera bom um INP de até 200 milissegundos, medido no percentil 75 das visitas reais. O guia de Core Web Vitals mostra como medir.

A escolha da propriedade animada pesa tanto quanto a biblioteca. O guia de animações do web.dev recomenda usar transform e opacity sempre que possível e evitar qualquer propriedade que provoque layout ou pintura. Animar width, top ou margin obriga o navegador a recalcular a página a cada quadro. Animar transform: translateX() produz o mesmo efeito visual sem esse recálculo. O mesmo guia pede uso moderado de will-change, só quando houver problema de performance comprovado.

Acessibilidade: o pedido de menos movimento

Algumas pessoas ativam no sistema operacional a opção de reduzir movimento. O navegador repassa essa escolha ao site pela media query prefers-reduced-motion. A documentação da MDN explica que animações como zoom e deslocamento de objetos grandes podem causar desconforto em quem tem distúrbio vestibular.

No CSS, o ajuste é curto:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Com JavaScript, a mesma consulta funciona via window.matchMedia('(prefers-reduced-motion: reduce)'). Toda biblioteca de animação séria permite ler esse valor e desligar ou simplificar o efeito. Reduzir também pode significar trocar: um fade curto costuma ser aceitável onde um deslocamento grande incomoda. Num carrossel automático, por exemplo, a versão reduzida pode parar a rotação e deixar a troca de slide por conta do usuário.

Teste no seu próprio aparelho. No celular e no computador, a opção fica nas configurações de acessibilidade, e ativá-la por cinco minutos mostra quanto do site depende de movimento para fazer sentido.

Como decidir no próximo projeto

1. Liste cada animação prevista e escreva o que ela explica. Corte as que não completam a frase.
2. Implemente primeiro em CSS. Tente a View Transitions API para transições entre telas.
3. Adicione uma biblioteca de animação só quando o CSS não der conta da sequência, da rolagem ou da física.
4. Escolha pela tarefa: GSAP para sequências e rolagem, Motion para interface em React, Lottie para ilustração vinda do designer.
5. Anime apenas transform e opacity sempre que der.
6. Implemente prefers-reduced-motion antes de publicar o site.
7. Meça o INP no celular antes e depois e compare.

O checklist para website ajuda a encaixar esses itens na revisão final do projeto.

O que fica depois da escolha

A biblioteca de animação certa é a menor que resolve o movimento que você justificou. Às vezes ela é nenhuma, e o CSS dá conta.

As ferramentas ficaram mais acessíveis: o GSAP inteiro passou a custar zero em abril de 2025, e Motion, Lottie e Anime.js têm licença MIT. O que continua custando é o tempo de interação do usuário, e o web.dev mede esse custo com um limite claro de 200 milissegundos.