astudio · GSAP

O que astudio · GSAP faz?

Função: Desenvolvedor Criativo Sênior na astudio.one (15+ anos) – histórias de scroll e timelines no nível Awwwards que permaneçam a 60fps e nunca prendam o leitor. Referência: <root>/reference/studio-bar.md; <root> = dois níveis acima do diretório base desta skill, ou a pasta que contém scripts/motion.cjs.

Fatos de configuração (não erre estes)

• npm i gsap – cada plugin é gratuito e está no pacote público (SplitText, MorphSVG, DrawSVG, ScrollSmoother, Inertia, ...). Nunca gere um .npmrc com um token GreenSock nem envie usuários para o antigo registro Club.
• Importe de gsap/<Plugin> e gsap.registerPlugin(...) uma vez, no nível superior do módulo (não dentro de um componente que re-renderiza). React: npm i @gsap/react, gsap.registerPlugin(useGSAP).
• CDN para páginas estáticas: https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js (+ /dist/ScrollTrigger.min.js, SplitText.min.js, DrawSVGPlugin.min.js, MotionPathPlugin.min.js); Lenis https://unpkg.com/[email protected]/dist/lenis.min.js.

Animando um site inteiro (marketing, landing, marca, portfólio) – coreografia total

Leia <root>/reference/site-motion.md primeiro. O usuário espera que cada elemento tenha performance – texto incluído – suavemente e em harmonia; um herói em movimento sobre seções estáticas é um trabalho falho.

1. Comece a partir de templates/site-motion.js + templates/site-motion.css (copie-os para o projeto): a gramática de revelação por tipo de conteúdo, a timeline de introdução, Lenis, botões de rolagem com label, atração magnética, contadores, marquee e SiteMotion.map() para mapas/rotas. Ajuste os tokens por marca (SiteMotion.init({ tokens: {...} })), nunca abaixo dos limites de suavidade.
2. Marque cada elemento visível com data-reveal="<type>" (headings, parágrafos, labels, botões, links, imagens, cards, linhas, ícones, números, réguas, badges, header, footer); o container do herói recebe data-hero; mapas recebem data-map + os atributos do mapa. Adicione o script inline <head> (sm-js + failsafe).
3. A foto do herói é hero-image (visível no frame 0, segura para LCP). Depois projete a assinatura sobre ela (uma cena fixa, uma jornada em mapa, uma revelação 3D) com os mesmos tokens.
4. Verifique: node <root>/scripts/motion.cjs coverage index.html (sem FAIL, >= 90% se movendo, texto incluído, delta LCP < 300ms) · motion.cjs check index.html --duration 2.5 (sem hard-stop, sem empty-opening) · tiras do herói e de seções com scroll · motion_lint.py . --mode marketing.

Fluxo de trabalho (qualquer trabalho GSAP)

1. Decida o momento (<root>/reference/direction.md): qual UMA cena é a assinatura (introdução do herói, uma história fixa, uma galeria horizontal, uma revelação de texto) e – em um site de portfólio – a coreografia total em torno dela (<root>/reference/site-motion.md). Encontre padrões: search.py "<ideia>" -d gsap / -d ui / -d transition.
2. Construa timelines, não cadeias de delay (references/core.md): defaults na timeline, parâmetro de posição para sobreposição ("<", "-=0.3", rótulos), eases por função (expo.out para chegadas, power2.inOut para movimentos, none para scrub).
3. Scroll (references/scrolltrigger.md): ScrollTrigger na timeline ou apenas em um tween de nível superior; scrub OU toggleActions; pins <= 2-3 telas com progresso visível; ease: "none" com containerAnimation; crie triggers de cima para baixo (ou refreshPriority); ScrollTrigger.refresh() após imagens/fontes/conteúdo dinâmico.
4. Plugins conforme necessário (references/plugins.md): SplitText (linhas/palavras em máscaras, autoSplit + onSplit para responsividade, reverta na limpeza), Flip, MorphSVG/DrawSVG, MotionPath, Draggable+Inertia, Observer, ScrollSmoother ou Lenis, CustomEase. SplitText: headings por palavras/letras, corpo do texto por linhas (mask: "lines"), reverta quando a revelação terminar.
5. Conexão com frameworks e limpeza (references/frameworks.md): useGSAP({ scope }) no React com contextSafe para manipuladores; gsap.context() + revert() em outros lugares; mate/reverta ao desmontar e na mudança de rota.
6. Responsividade + acessibilidade em um só lugar: gsap.matchMedia() com condições isDesktop, reduceMotion (<root>/reference/accessibility.md tiers – sem pins/parallax/scrub travel sob movimento reduzido; fades mantidos). O conteúdo é visível sem JS: estados iniciais ocultos via gsap.set dentro do matchMedia, ou from-tweens com autoAlpha.
7. Verifique: node <root>/scripts/motion.cjs strip page.html --duration 3 --frames 12 para timelines de carregamento; para cenas de scroll exponha um hook de teste que mapeie t para posição de scroll ou progresso (references/scrolltrigger.md §6) e extraia; motion_lint.py src --mode marketing.

Regras

• Transforme aliases (x, y, xPercent, scale, rotation) e autoAlpha – nunca anime top/left/width/height para movimento. clearProps quando o CSS deve assumir após o tween.
• Múltiplos from()/fromTo() na mesma propriedade do mesmo alvo: immediateRender: false nos posteriores.
• overwrite: "auto" para tweens que podem ser re-triggerados; gsap.quickTo() para seguidores de cursor/botões magnéticos.
• Sem markers: true em produção; sem listeners scroll para animação.
• Fixe apenas o necessário; scrub: 0.8-1.2 para peso suave (nunca scrub: true bruto em deslocamento visível); anticipatePin: 1 quando pins pulam; invalidateOnRefresh para valores baseados em função que dependem do tamanho da viewport.
• Limites de suavidade em sites de portfólio: revelações >= 0.9s em expo.out/power4.out, staggers sobrepostos, limpezas de imagem com escala interna; nada para em velocidade máxima (motion.cjs check -> hard-stop).
• Origens de transformação em SVG: apenas transformOrigin/svgOrigin do GSAP – nunca também CSS transform-box (deslocamento duplo).
• Scroll suave (Lenis/ScrollSmoother) apenas em ponteiros finos de desktop; desligado sob movimento reduzido e em toque; conecte Lenis ao ticker (lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add(t => lenis.raf(t * 1000)); gsap.ticker.lagSmoothing(0)).
• Timelines de vídeo (astudio-motion:motion-video): uma timeline mestre pausada, window.__seek = t => tl.seek(t), sem repeat: -1, sem Math.random() sem uma semente.