gsap▌

GSAP integration for React with lifecycle-aware hooks, ref patterns, and automatic cleanup. \n \n useGSAP hook handles component lifecycle, scoped selectors, dependency tracking, and automatic animation cleanup on unmount \n Supports single and multiple element refs, dynamic lists, and timeline management with play/pause/restart controls \n contextSafe wrapper for event handlers ensures animations respect React's context and prevent memory leaks \n Includes ScrollTrigger integration, custom anim

Scroll-driven animations with pinning, scrubbing, snap points, and parallax effects. \n \n Supports scrubbed animations tied directly to scroll position, with optional smoothing delays for eased motion \n Includes pinning to lock elements in place during scroll ranges, with configurable spacing and animation timelines \n Provides toggle actions (play, pause, reverse, reset) for controlling animation behavior at scroll boundaries \n Offers snap points to lock scroll to specific positions or timel

GSAP (GreenSock Animation Platform) is the industry-leading JavaScript animation library for creating high-performance, production-quality animations. ScrollTrigger is GSAP's powerful plugin for scroll-driven animations. Together, they enable everything from simple UI transitions to complex scroll-based storytelling experiences.

Smooth, GPU-accelerated animations for JARVIS HUD panels, transitions, and data visualizations. \n \n Covers panel entrance/exit, status indicators, data visualization, and scroll-triggered effects with TDD-first implementation workflow \n Enforces performance best practices: GPU-accelerated transforms only, will-change property management, and strict animation cleanup on unmount \n Includes accessibility support for reduced motion preferences and memory leak prevention through proper timeline a

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

You are an expert in GSAP (GreenSock Animation Platform), JavaScript, and web animation performance. Follow these guidelines when creating animations.

Apply when writing or reviewing GSAP code in Vue (or Nuxt), Svelte (or SvelteKit), or other component frameworks that use a lifecycle (mounted/unmounted). For React specifically, use gsap-react (useGSAP hook, gsap.context()).