What problem does it solve? Writing GSAP ScrollTrigger animations in React often leads to memory leaks, double-invoked animations under React Strict Mode, and selector collisions between components. This Skill produces a ready-to-use Next.js App Router component scaffold that follows the correct useGSAP pattern with scoped selectors, eliminating these common pitfalls. ## Core Features & Use Cases - Memory-Safe Scaffold: Generates a .tsx component using useGSAP with containerRef scoping instead of raw useEffect/useLayoutEffect, preventing leaks and Strict Mode issues. - ScrollTrigger Timeline Template: Includes a working ScrollTrigger timeline with markers: false, staggered .reveal-item elements, and editable placeholders for animation config. - Lenis Compatibility: Detects Lenis smooth scroll integration and notes that ScrollTrigger must follow the active Lenis provider without duplicating setup. - Use Case: Ask for a new scroll-animated section for your Next.js landing page and receive a complete, copy-paste-ready TSX component with a heading and three staggered reveal items. ## Quick Start Generate a GSAP ScrollTrigger component named HeroSection with a scroll-based stagger reveal animation.
