Nos termos do próprio skill
ScrollTrigger é o plugin do GSAP para animação vinculada ao scroll: disparar tweens e timelines em posições de scroll, fixar (pin) seções, sincronizar o progresso com o scroll e conduzir uma timeline por um intervalo de start/end.
Apresenta o vocabulário completo de config — trigger, start/end incluindo clamp() e valores relativos, endTrigger, scrub, toggleActions, pin e pinSpacing, snap, scroller, id, refreshPriority — e adiciona ScrollTrigger.batch() para revelações escalonadas que chegam juntas, scrollerProxy() para scrollers suaves de terceiros, e containerAnimation para simular scroll horizontal. Os valores padrão são indicados por opção, junto com uma checklist de boas práticas e uma lista explícita de não fazer cobrindo limpeza no React, ordem de refresh, ease e marcadores remanescentes.
O que ele produz
- Um tween ou timeline cujo progresso está vinculado à posição de scroll através do intervalo start-to-end do trigger.
- Um ScrollTrigger independente criado sem um tween vinculado, usado com callbacks para comportamento personalizado, como atualizar a UI a partir de self.progress.
- Um Array de instâncias de ScrollTrigger, uma por alvo do batch, retornado por ScrollTrigger.batch().
- Tweens aninhados que disparam com base no movimento horizontal produzido por um tween containerAnimation.
Como funciona
- 01Registre o Plugin Uma Vez
O ScrollTrigger é fornecido como um plugin, e não como parte da API de animação principal, portanto é registrado uma única vez após o carregamento do script, antes de qualquer configuração de scrollTrigger ser executada.
- 02Anexe uma Configuração de scrollTrigger
Um tween ou timeline recebe um objeto scrollTrigger que nomeia o elemento gatilho, além de um start e um end descrevendo a posição do gatilho em relação à posição do viewport.
- 03Escolha Como o Scroll Direciona o Playhead
O scrub vincula o progresso continuamente à posição de rolagem, opcionalmente com um atraso numérico de recuperação, enquanto o toggleActions dispara ações discretas de play/reverse nos quatro cruzamentos.
- 04Fixe uma Seção e Faça Scrub em uma Timeline
O pinning mantém o elemento gatilho fixo enquanto o intervalo está ativo, e uma timeline anexada a esse ScrollTrigger avança seus filhos ao longo do mesmo intervalo start-to-end.
- 05Agrupe Elementos Que Chegam Juntos
O ScrollTrigger.batch() cria um ScrollTrigger por alvo e coleta seus callbacks em um curto intervalo, de modo que elementos que entram quase simultaneamente possam ser animados com um stagger em uma única chamada.
- 06Encerre Instâncias Quando o Conteúdo Desaparece
A remoção de elementos animados ou a troca de páginas, como em uma single-page app, exige o encerramento das instâncias associadas para que não continuem sendo executadas contra elementos obsoletos.