gsap-scrolltrigger

Visão geral do skill gsap-scrolltrigger

O que o gsap-scrolltrigger faz

O skill gsap-scrolltrigger ajuda você a criar animações vinculadas ao scroll com o plugin ScrollTrigger do GSAP: iniciar e parar animações conforme a página rola, fixar seções, sincronizar o progresso com a barra de rolagem e disparar efeitos em posições exatas da viewport. Ele é a escolha certa quando a задача não é “fazer algo animar”, e sim “fazer a animação responder ao scroll de forma controlada”.

Quem deve usar

Use o skill gsap-scrolltrigger para Frontend Development quando você precisar de páginas de marketing, layouts editoriais, narrativas longas, demos de produto ou motion em estilo parallax que dependa da posição do scroll. Se a pessoa só quer um prompt genérico de animação, esse skill agrega mais quando o comportamento de scroll, o timing ou o pinning importam.

Por que este skill é diferente

O grande diferencial é o controle prático do scroll: start, end, scrub, pin e os comportamentos de toggle entregam resultados previsíveis, difíceis de descrever bem em um prompt comum. O guia gsap-scrolltrigger também é útil quando você quer recomendações específicas do GSAP, em vez de uma resposta de animação agnóstica à biblioteca.

Como usar o skill gsap-scrolltrigger

Instale e carregue do jeito certo

Execute a instalação do skill com npx skills add greensock/gsap-skills --skill gsap-scrolltrigger. Na implementação, carregue o GSAP e o plugin ScrollTrigger e registre tudo uma vez com gsap.registerPlugin(ScrollTrigger);. Se o skill estiver sendo usado em um fluxo com IA, garanta que o prompt peça saída específica de ScrollTrigger, e não uma orientação genérica de animação em CSS.

Dê a entrada certa para o skill

O melhor uso de gsap-scrolltrigger começa com uma história de scroll concreta: qual elemento deve animar, o que acontece ao entrar, se a animação deve acompanhar o scroll, se a seção deve ficar fixa e o que deve acontecer quando o usuário volta a rolar para cima. Um bom prompt é específico, por exemplo: “Crie uma hero section fixa em que o título desvanece e a imagem escala de 0.9 para 1.1 conforme a seção vai de top center até bottom center.”

Leia primeiro os arquivos do repositório

Comece por SKILL.md e depois inspecione a árvore completa de arquivos em busca de exemplos vinculados ou notas de implementação. Neste repositório, o principal valor está no guia central: quando usar o plugin, como registrá-lo e como configurar o exemplo de trigger. Se você for adaptar o padrão para outro codebase, mapeie as configurações de trigger para o ciclo de vida e as regras de acesso ao DOM do seu framework.

Use o padrão, não só o snippet

A parte realmente útil do fluxo de gsap-scrolltrigger install e de uso é entender a lógica de configuração, e não copiar código no automático. Preserve a relação entre elemento de trigger, pontos da viewport e comportamento da ação. Para uma saída pronta para produção, peça checagens de acessibilidade, fallback para prefers-reduced-motion e um layout alternativo caso o pinning altere o fluxo da página.

Perguntas frequentes sobre o skill gsap-scrolltrigger

O gsap-scrolltrigger é só para animação avançada?

Não. Ele também é útil para efeitos de scroll fáceis de entender, desde que dependam da posição da rolagem. A principal curva de aprendizado é entender como trigger, start, end e scrub funcionam em conjunto.

Quando não devo usar este skill?

Não use gsap-scrolltrigger se a necessidade for uma animação simples de entrada que não dependa do scroll, ou se o projeto já estiver padronizado em outra biblioteca de motion. Também é uma escolha ruim quando a página precisa continuar totalmente funcional sem lógica de scroll baseada em JavaScript.

Como ele se compara a um prompt normal?

Um prompt comum pode descrever o objetivo visual, mas deixar passar os detalhes de implementação que tornam o ScrollTrigger confiável. O gsap-scrolltrigger skill é melhor quando você precisa de comportamento de scroll concreto, terminologia mais clara e menos suposições sobre como conectar o efeito.

Ele funciona com React, Vue ou JavaScript puro?

Sim, mas os detalhes de integração mudam. O skill é mais forte quando você já sabe qual é a stack de destino e pode dizer ao modelo se ele deve produzir JavaScript puro, código baseado em componentes ou tratamento de ciclo de vida seguro para o framework.

Como melhorar o skill gsap-scrolltrigger

Especifique o contrato de scroll

O maior ganho de qualidade vem de definir o contrato de scroll: o que inicia a animação, o que a encerra, se ela deve acompanhar o scroll e se deve fixar a seção. Em vez de dizer “faça uma seção com parallax legal”, diga “fixe a seção por uma viewport, mova a imagem para cima com scrub e faça o caption aparecer depois que a imagem cruzar o centro.”

Descreva as restrições de layout logo no início

Mencione header sticky, altura dinâmica de conteúdo, breakpoints de mobile e se a seção precisa evitar saltos de layout. Esses detalhes alteram a saída do guia gsap-scrolltrigger mais do que o estilo visual, porque o comportamento do ScrollTrigger depende da geometria real da página.

Peça detalhes de implementação que evitem retrabalho

Solicite que o código inclua limpeza, timing de refresh e tratamento de prefers-reduced-motion quando isso fizer sentido. Os erros mais comuns são usar o elemento de trigger errado, exagerar no scrub em blocos pequenos de conteúdo ou esquecer que o pinning pode mudar o fluxo do documento. Uma entrada mais forte reduz esses problemas e aproxima a primeira saída de algo realmente publicável.

Itere com um exemplo real de conteúdo

Depois da primeira versão, forneça nomes reais das seções, tamanho do texto e dimensões das imagens para que a animação seja ajustada ao conteúdo. As saídas mais úteis de gsap-scrolltrigger para Frontend Development quase sempre passam por uma revisão com markup real, porque o timing do trigger e a duração do pin dependem do DOM final, e não só da ideia.