Habilidade de Animação com Anime.js

Anime.js é um motor de animação JavaScript leve, mas extremamente poderoso. Ele se destaca em linhas do tempo complexas, animações escalonadas (staggering) e controle preciso sobre DOM, CSS e SVGs.

Contexto

Esta habilidade é usada para criar animações web de alta fidelidade e impressionantes, que vão muito além de simples transições CSS. É a ferramenta escolhida para sites interativos de nível premiado.

Quando Usar

Acione esta habilidade quando:

• Criar orquestrações complexas de várias etapas para landing pages.
• Implementar animações escalonadas para revelar grades, textos ou visualizações de dados.
• Animar caminhos SVG (transformar formas, desenhar linhas dinâmicas).
• Construir elementos de UI cinéticos e altamente interativos que respondem fluidamente à entrada do usuário.

Fluxo de Execução

1. Identificar Alvos: Selecione os elementos DOM ou SVGs a serem animados.

2. Definir Propriedades e Easing: Especifique os valores a serem animados. Crucialmente, utilize funções de easing avançadas (por exemplo, cubicBezier, spring ou elastic personalizadas) em vez das básicas linear ou ease-in-out para fazer o movimento parecer sofisticado e natural.

3. Orquestrar Linhas do Tempo: Inspecione a versão principal instalada primeiro. Este exemplo tem como alvo o Anime.js v3; use anime.timeline() para sequenciar coreografias complexas. Domine o uso de offsets de linha do tempo ('-=200' relativo vs. absoluto) para criar movimento sobreposto contínuo.

4. Implementar: Para um bundler com Anime.js v3 instalado, import anime from "animejs"; fornece o binding anime. Os seletores devem existir no DOM renderizado.

   const tl = anime.timeline({
     easing: "spring(1, 80, 10, 0)",
     duration: 1000,
   });
   tl.add({
     targets: ".hero-text",
     translateY: [50, 0],
     opacity: [0, 1],
     delay: anime.stagger(100),
   }).add(
     { targets: ".hero-image", scale: [0.9, 1], opacity: [0, 1] },
     "-=800",
   );
   

Movimento e Compatibilidade

• Escopo: Use movimento quando ele atender ao briefing do produto e à tarefa do usuário. Respeite o sistema de design existente; transições simples e estados estáticos são escolhas válidas.
• Escalonamento (Staggering): Utilize anime.stagger() extensivamente para adicionar ritmo orgânico a múltiplos elementos.
• Desempenho: Monitore o uso da thread principal; use will-change: transform, opacity onde apropriado para aceleração por GPU.

Exemplo

Solicitação do usuário:

Criar orquestrações complexas de várias etapas para landing pages.

Limitações

• O código acima usa a API v3. O Anime.js v4 usa createTimeline() importado e uma assinatura de alvo/parâmetro diferente; não misture exemplos de versões principais. Consulte a documentação oficial de timeline para a versão instalada.
• Respeite prefers-reduced-motion: forneça um estado final estático, evite sequestro de scroll (scroll hijacking) e mantenha as interações de foco/teclado imediatamente utilizáveis. Descarte animações quando seu componente for desmontado.
• will-change é uma dica temporária de otimização, não uma garantia de aceleração por GPU; meça os frames reais e evite deixá-lo em todos os elementos.
• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como um substituto para validação específica do ambiente, testes ou revisão de especialistas.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.