gsap▌

Apply when using or reviewing code that uses GSAP plugins: registering plugins, scroll-to, flip/FLIP animations, draggable elements, SVG (DrawSVG, MorphSVG, MotionPath), text (SplitText, ScrambleText), physics, easing plugins (CustomEase, EasePack, CustomWiggle, CustomBounce), or GSDevTools. ScrollTrigger has its own skill (gsap-scrolltrigger).

Apply when building multi-step animations, coordinating several tweens in sequence or parallel, or when the user asks about timelines, sequencing, or keyframe-style animation in GSAP.

Apply when writing or reviewing code that uses gsap.utils for math, array/collection handling, unit parsing, or value mapping in animations (e.g. mapping scroll to a value, randomizing, snapping to a grid, or normalizing inputs).

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

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

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()).