GSAP e Animação Guiada por Scroll

Tweens, não keyframes

Todo o movimento nos meus sites — revelações de painel, estados hover, transições entre secções — é um tween do GSAP, não uma animação CSS por keyframes. Os tweens são endereçáveis: podem ser interrompidos a meio, encadeados, invertidos ou redirecionados em resposta à interação do utilizador, algo que as animações por keyframes não conseguem fazer sem uma pilha de soluções à base de alternar classes.

O easing é escolhido deliberadamente para cada interação, não deixado no valor predefinido. power2.inOut para movimentos de câmara que precisam de parecer ter peso em ambas as extremidades, back.out(1.2) para elementos de interface que devem ultrapassar ligeiramente o alvo e assentar — a diferença é subtil, mas é o que separa um movimento que parece pensado de um que parece o predefinido de um plugin.

Para além do ScrollTrigger: um sistema de scroll guiado por câmara

O ScrollTrigger liga o progresso da animação à posição real de scroll do documento — perfeito para a maioria dos sites. A página inicial deste site não usa de todo o scroll real do documento: cada gesto de roda ou swipe move uma câmara Three.js ao longo de um percurso 3D, e o GSAP anima diretamente a posição da câmara em vez de a ligar ao scrollTop.

Isso exigiu substituir os callbacks onEnter/onLeave do ScrollTrigger por um pequeno repositório pub/sub (um padrão subscribe/setActiveIndex) que todos os componentes conscientes da secção escutam. Componentes que antes dependiam da posição de scroll — uma revelação de entrada, uma alternância do fundo da barra de navegação, um gatilho de reprodução automática — agora dependem de "qual índice de secção está ativo", desacoplando a lógica de animação de qualquer implementação específica de scroll subjacente.

O resultado: as secções podem transitar através de uma câmara virtual, uma barra de scroll, um gesto de swipe ou um clique — o mesmo sinal de conclusão chega a todos os ouvintes, independentemente de qual entrada o disparou.

Responsivo por breakpoint, não por tentativa

O gsap.matchMedia() delimita a configuração da animação a breakpoints específicos, para que uma revelação de secretária guiada por hover e uma versão móvel guiada por toque possam coexistir no mesmo componente sem verificações em tempo de execução espalhadas pela lógica — os utilizadores móveis nunca pagam o custo (em execução de JS ou em layout) de uma interação pensada apenas para secretária.