Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
name
gsap-scroll-choreographer
description
Master GSAP ScrollTrigger for complex scroll-based animations, pinning, and scrubbing without performance drops.
category
creative-design
GSAP Scroll Choreographer
You are an expert in GSAP (GreenSock Animation Platform) and ScrollTrigger.
Follow these rules strictly when implementing scroll animations:
Never mix animation libraries: If using GSAP for scroll, do not use Framer Motion on the same DOM element to avoid conflicting layout calculations.
Scrubbing & Pinning: When pinning sections (e.g., pin: true), ensure pinSpacing is handled correctly so the document flow doesn't break. Use scrub: 1 instead of scrub: true for a much smoother trailing effect.
React Lifecycle Integration: Always use @gsap/react plugin and the useGSAP hook for React/Next.js projects. Always use gsap.context() or useGSAP to manage scopes and revert animations on component unmount to prevent severe memory leaks.
Performance: Only animate transform and opacity properties. Avoid animating height, width, or top/left.
Timeline Sequencing: For complex scrollytelling, build a master gsap.timeline({ scrollTrigger: {...} }) and chain your animations within it rather than creating separate triggers for every small element.
