Índice do artigofaltam 7 min de leitura
O Anime.js 4 não é uma atualização da versão 3: é outra biblioteca com o mesmo nome. A pergunta deixou de ser se ela anima bem e passou a ser quanto do motor você quer carregar.
Quem procura biblioteca de animação em JavaScript costuma escolher pelo nome mais citado e nem sempre olha o que mudou embaixo dele. No caso do Anime.js, o que mudou foi tudo: a versão 4 reescreveu a biblioteca do zero e trocou a função única por peças que você importa separadas.
Este artigo explica o que a biblioteca é hoje, reconstrói o que a versão 4 mudou de fato, mostra o custo em KB de cada peça e termina no critério prático de escolha entre Anime.js, GSAP e Motion.
Resumo do artigo
- O Anime.js está sob licença MIT, permite uso comercial sem pagamento e se sustenta por patrocínio, segundo o próprio site.
- A versão 4.0.0, de abril de 2025, foi uma reescrita completa: API modular, ESM-first, com módulos independentes no lugar de uma função única.
- O pacote inteiro declara 24,50 KB, mas ninguém precisa carregar tudo: desde a 4.2.0 cada módulo tem seu próprio caminho de import.
- O divisor de texto, que em outras bibliotecas é recurso pago ou plugin à parte, entrou no núcleo em julho de 2025.
O Anime.js é um motor de animação modular sob licença MIT
O Anime.js é uma biblioteca JavaScript para animar elementos do DOM, SVG, objetos comuns e, desde a versão 4.5.0, cenas three.js. Ela está sob licença MIT, o que significa uso comercial liberado, sem assinatura e sem cláusula de restrição. O arquivo de licença no repositório traz apenas o texto MIT padrão, assinado por Julian Garnier, autor e mantenedor do projeto desde 2016.
A escala do projeto surpreende quem só conhece os concorrentes mais citados. São 72.492 estrelas no GitHub, mais que o dobro das 33.395 da Motion e das 28.073 do GSAP, e cerca de 1,14 milhão de downloads semanais no npm.
Fontes: API do GitHub e registro npm, downloads da semana de 18 a 24/08/2026; tamanho declarado em animejs.com.
O contraste entre estrelas e downloads diz algo útil sobre o projeto: muita gente admira, menos gente coloca em produção. Isso não é defeito da biblioteca, é sintoma de mercado. O Anime.js nasceu como ferramenta de animação criativa e de portfólio, enquanto os concorrentes com mais downloads chegaram por dentro de frameworks de interface, carregados como dependência transitiva de outra coisa.
A versão 4 foi uma reescrita, não uma atualização
A 4.0.0 saiu em 3 de abril de 2025 e o próprio anúncio de release a descreve como uma reescrita completa, com API modular e ESM-first. Na prática, isso significa que código escrito para a versão 3 não roda na 4 sem migração, e que a forma de pensar a animação mudou.
Na versão 3, tudo passava por uma função anime() que recebia um objeto de configuração. Na versão 4, a biblioteca expõe peças nomeadas: animate() para animar, createTimeline() para sequenciar, createTimer() para agendar, createDraggable() para arrastar, onScroll() para reagir à rolagem e createScope() para delimitar o ciclo de vida. Cada peça é uma importação separada.
Quem vem do React reconhece o padrão. createScope() existe justamente para o problema que quebra animação em componente: a limpeza. Você declara o escopo, registra as animações dentro dele e o descarte de tudo acontece em uma chamada só, sem rastrear timelines soltas na desmontagem.
O tamanho do pacote é uma escolha sua, não um número fixo
Os 24,50 KB que o site anuncia são o total, e quase ninguém precisa do total. Desde a versão 4.2.0, de setembro de 2025, cada módulo tem seu próprio caminho de importação, o que permite montar o pacote exato do projeto: import { animate } from 'animejs/animation' traz o motor de animação sem arrastar o sistema de arrastar elementos junto.
Isso muda a conversa de orçamento técnico. Em vez de perguntar quanto pesa a biblioteca, a pergunta certa passa a ser quais recursos a interface realmente usa.
A leitura prática do gráfico é que a timeline, principal argumento de venda de qualquer biblioteca de animação séria, é o módulo mais barato da lista. Ela custa pouco porque herda do timer, que já está carregado. Quem paga caro é quem quer arrastar elementos ou reagir à rolagem, e são justamente os recursos que muito projeto não usa.
O divisor de texto entrou de graça no núcleo
O text.split() chegou na versão 4.1.0, em 23 de julho de 2025, e o anúncio o descreve como um divisor de texto completo em apenas 7 KB. Ele separa um bloco de texto em caracteres, palavras e linhas para que cada pedaço possa ser animado sozinho, aquele efeito de manchete que se monta letra a letra.
Dividir texto é historicamente o recurso que as bibliotecas cobram, e é aí que o Anime.js se diferencia sem depender de nenhuma comparação de performance. No GSAP, o SplitText só deixou de exigir assinatura em 2025; na Motion, o splitText continua dentro do produto pago. No Anime.js, ele é parte da biblioteca desde 2025, sob a mesma licença MIT do resto.
O detalhe que separa uma implementação séria de uma gambiarra aparece na lista de recursos do release: divisão de idiomas que não usam espaço, como chinês e japonês, tratamento de emojis e caracteres especiais, e comportamento acessível para leitor de tela. Quebrar texto em <span> por caractere é fácil; quebrar sem destruir a leitura assistiva não é.
A versão 5 está em beta e aponta para layout e 3D
Existem duas versões 5.0.0-beta publicadas no npm, a primeira em 5 de agosto e a segunda em 17 de agosto de 2026. Elas não têm release correspondente no GitHub, o que sinaliza teste em campo e não lançamento. Nenhum projeto novo deveria começar por elas.
O que essas betas revelam é a direção do projeto. A lista de caminhos exportados do pacote inclui animejs/layout e animejs/adapters/three, dois territórios que a v4 já vinha ocupando aos poucos.
-
A reescrita modular
API ESM-first, módulos independentes e migração obrigatória para quem vinha da versão 3.
-
Divisor de texto no núcleo
O text.split() entra na biblioteca, com suporte a idiomas sem espaço, emojis e leitura assistiva.
-
Animação entre estados de layout
O createLayout() passa a animar a transição entre duas posições calculadas pelo navegador.
-
Ordem fixa de transforms
Mudança que quebra compatibilidade: transforms passam a renderizar em ordem fixa, independente de como foram declarados.
-
Adaptadores e three.js
O registerAdapter() abre a animação para alvos fora do DOM, com adaptador pronto para objetos, materiais, luzes e câmeras do three.js.
A quebra de abril de 2026 merece atenção de quem mantém projeto: a partir da 4.4.0, scale e translateX declarados na mesma animação renderizam sempre na mesma ordem, mesmo que você tenha escrito ao contrário. É o tipo de mudança que não gera erro no console e altera o resultado visual em silêncio.
Anime.js, GSAP ou Motion: o critério é o formato do projeto
As três bibliotecas animam bem, e escolher pela mais rápida é uma pergunta sem resposta pública confiável. O critério que sobra é o formato do projeto: quem escreve o código, dentro de qual framework, com qual apetite por dependência.
| Critério | Anime.js | GSAP | Motion |
|---|---|---|---|
| Licença | MIT | Proprietária, uso gratuito | MIT no núcleo |
| Import por módulo | Sim, desde a 4.2.0 | Por plugin registrado | Sim, com pacote mini |
| Divisor de texto | No núcleo, gratuito | Plugin, gratuito desde 2025 | Dentro do produto pago |
| Dependência de framework | Nenhuma | Nenhuma | React, Vue ou JavaScript puro |
| Downloads npm por semana | 1,14 mi | 4,74 mi | 19,31 mi no pacote atual |
Fontes: registro npm, semana de 18 a 24/08/2026; licenças lidas nos repositórios oficiais; páginas de documentação de cada projeto.
A linha que mais pesa contra o Anime.js é a última. Em adoção medida por download, a distância para as outras duas é de uma ordem de grandeza, e adoção alta se traduz em respostas prontas quando algo quebra às onze da noite.
Quando o Anime.js não é a escolha certa
Existem três situações em que recomendar Anime.js seria forçar a barra.
A primeira é uma equipe React que já usa componentes animados de biblioteca. Se o time trabalha com animação de layout automática e transições de saída ligadas ao ciclo de vida do componente, uma biblioteca desenhada para React entrega isso em menos código, e misturar dois motores de animação na mesma tela costuma terminar em conflito de propriedade.
A segunda é microinteração simples. Hover, foco e fade resolvem em CSS puro, sem dependência nenhuma, e qualquer biblioteca aqui é peso sem retorno.
A terceira é projeto que depende de um plugin específico já escolhido. O ecossistema de plugins do GSAP é maior e tem mais casos resolvidos publicamente, e quando o requisito nasce de um efeito visto em outro site, a chance de existir referência pronta é maior lá.
Como decidir em um projeto real
A decisão fica objetiva quando você responde quatro perguntas antes de instalar qualquer coisa.
- A animação é orquestrada em sequência ou são efeitos isolados? Efeito isolado quase sempre é CSS.
- O projeto vive dentro de um framework de interface ou é HTML servido direto? Framework empurra para biblioteca do mesmo ecossistema.
- O orçamento de bundle é apertado o suficiente para que 5 KB importem? Se sim, import por módulo deixa de ser detalhe.
- Alguém vai manter esse código daqui a dois anos? Se a resposta for outra pessoa, adoção e documentação pesam mais que elegância de API.
Se as respostas apontarem para sequência orquestrada, sem framework dominante e com bundle apertado, o Anime.js é a escolha mais direta das três. Se apontarem para React com animação ligada a componente, ele não é.
Precisa decidir a stack de front-end do seu projeto?
Solicite um orçamento e avance com arquitetura, escopo e entrega definidos.
Fontes e método
A apuração deste artigo foi feita em 28 de agosto de 2026, sempre em fonte primária. Versões, datas de publicação e licenças vêm do registro npm e dos arquivos LICENSE e de release do repositório juliangarnier/anime. Estrelas, forks e histórico de versões vêm da API do GitHub. Tamanhos por módulo e a declaração de gratuidade vêm de animejs.com. Números de download referem-se à semana de 18 a 24 de agosto de 2026.
Nenhum teste de performance foi executado pela X-Apps para este artigo, e nenhuma comparação de velocidade entre as bibliotecas é feita aqui por esse motivo. O Anime.js, o GSAP e a Motion são projetos externos, sem relação comercial com a X-Apps.
Perguntas frequentes
Sim. O repositório está sob licença MIT, que permite uso comercial, modificação e redistribuição sem pagamento. O site declara que o projeto se sustenta por patrocínio.
A versão estável no npm é a 4.5.0, publicada em 22 de junho de 2026. Existem versões 5.0.0-beta publicadas no npm desde agosto de 2026, ainda sem release marcado no GitHub.
A v4 é uma reescrita completa, com API modular e ESM-first. Em vez de uma única função anime(), a biblioteca passou a expor módulos independentes como animate, createTimeline, createDraggable e onScroll.
Sim, a biblioteca é independente de framework e manipula elementos do DOM. Em React, o padrão é criar as animações dentro de um efeito e usar o módulo Scope para limpar tudo na desmontagem.
Depende do que pesa mais no projeto. O Anime.js entrega imports por módulo e um pacote enxuto; o GSAP tem ecossistema maior de plugins e mais material de referência acumulado.
Não. O divisor de texto entrou na própria biblioteca na versão 4.1.0, em julho de 2025, sem custo adicional.
