gsap-cookbook

Production recipes for core GSAP animation orchestration. Provides foundational patterns and dispatches to specialised sub-skills based on animation type. Companion to official gsap-frameworks and gsap-timeline skills (API reference). Triggers: GSAP animation, gsap.to, gsap.from, gsap.context, ctx.add, Vue GSAP, Nuxt GSAP, animation pattern, component animation, section animation, layout animation. Non-triggers: Not for initial GSAP installation/setup (use gsap-setup). Not for specific pattern implementation — dispatches to sub-skills instead. Outcome: Provides foundational animation patterns (context, cleanup, composables, autoAlpha, matchMedia) and dispatches to the correct sub-skill based on animation type.

Production recipes for cursor and pointer-driven GSAP animations. Companion to official gsap-core and gsap-performance skills (API reference). Triggers: cursor follower, cursor effect, mouse follower, magnetic button, spotlight cursor, cursor trail, particle trail, spring cursor, elastic cursor, pointer animation, custom cursor, cursor glow, clipPath cursor, quickTo cursor, image preview hover, perspective tilt, 3D tilt cursor. Non-triggers: Not for hover/tilt card effects (use gsap-interact), not for scroll animations (use gsap-scroll), not for general mouse events without cursor effects. Outcome: Produces cursor-driven animation effects with proper cleanup, overwrite management, and performance optimization (quickTo, ticker, will-change lifecycle).

Production recipes for mouse-driven interactive GSAP animations. Companion to official gsap-core and gsap-performance skills (API reference). Triggers: GSAP mouse, mousemove animation, tilt card, 3D tilt, quickTo, quickSetter, hover animation, interactive GSAP, parallax hover, drag interaction, Draggable, liveSnap, mouse-driven animation, dock effect, macOS dock, magnification, proximity scale, dock magnify. Non-triggers: Not for scroll-driven animation (use gsap-scroll), text effects (use gsap-text), SVG drawing (use gsap-svg), visual effects like glitch/marquee (use gsap-vfx), or cursor/pointer effects (use gsap-cursor). Outcome: Produces mouse-driven interactive animations — tilt cards, hover effects, and drag interactions.

Production recipes for GSAP performance optimisation. Apply after building animations (gsap-animate) to audit and improve performance. Companion to official gsap-performance skill (API reference). Triggers: GSAP performance, animation optimise, animation slow, jank, 60fps, memory leak, tween cleanup, force3D, will-change, quickTo, quickSetter, overwrite, layout thrashing, GPU compositing, animation audit, gsap optimise, animation performance review. Non-triggers: Not for building new animations (use gsap-animate and sub-skills). Not for testing (use gsap-test). Apply this skill AFTER animations are built. Outcome: Audits and improves existing GSAP animations for 60fps — GPU acceleration, high-frequency tools, anti-patterns, and a component-level performance checklist.

Production recipes for scroll-based GSAP animations. Companion to official gsap-scrolltrigger skill (API reference). Triggers: ScrollTrigger, scroll animation, scroll reveal, parallax, sticky cards, stacking cards, scrub, pin section, batch reveal, masonry reveal, scroll progress, timeline scrub, elastic type, section switching, ScrollTrigger.batch, ScrollTrigger.create, scroll refresh, scroll cleanup, GSAP scroll, Vue scroll animation, Nuxt scroll animation. Non-triggers: Not for mouse-driven interactions (use gsap-interact), text effects (use gsap-text), SVG path drawing (use gsap-svg), or visual effects (use gsap-vfx). Outcome: Produces scroll-triggered animations — reveals, batch staggers, parallax layers, pinned sections, and scrubbed timelines.

Production recipes for GSAP SVG animations. Companion to official gsap-plugins skill (API reference). Triggers: SVG animation, GSAP SVG, path drawing, strokeDashoffset, DrawSVG, drawSVG, SVG morph, MorphSVGPlugin, circuit tree, circuit board, CTAHud, HUD animation, pulse ring, scallop wave, SVG stagger, SVG fill, SVG stroke, SVG cleanup, feGaussianBlur, SVG glow, SVG blink, shape overlay, page transition, section transition, smooth morph, morph interpolation, dynamic morphing, SVG curtain, shape transition. Non-triggers: Not for text animation (use gsap-text), scroll reveals without SVG (use gsap-scroll), mouse interactions (use gsap-interact), or non-SVG visual effects (use gsap-vfx). Outcome: Produces SVG animations — path drawing, morphing, circuit board patterns, HUD systems, pulse rings, and scallop waves.

Production recipes for testing, debugging, and verification of GSAP animations. No API overlap — unique to this plugin. Triggers: test animation, animation cleanup test, Playwright animation, animation debug, animation markers, memory leak animation, animation screenshot, visual QA animation, animation verification, pre-launch animation check. Non-triggers: Not for building animations (use gsap-animate). Not for performance optimisation (use gsap-optimise). Use this skill for verification and QA. Outcome: Produces test infrastructure — Vitest cleanup tests, Playwright hooks, debugging patterns, and pre-launch checklists.

Production recipes for GSAP text animations using SplitText and ScrambleTextPlugin. Companion to official gsap-plugins skill (API reference). Triggers: SplitText, split text, text animation, word animation, scramble text, ScrambleTextPlugin, text reveal, masked text, clip reveal, word stagger, text stagger, character animation, char split, kinetic text, elastic type, text decode, terminal text, cyber text, glitch text, chainTextReveal, useReveal text, GSAP text, Vue text animation, Nuxt text animation. Non-triggers: Not for scroll-driven animation without text (use gsap-scroll), mouse interactions (use gsap-interact), SVG animation (use gsap-svg), or general visual effects (use gsap-vfx). Outcome: Produces text animations — masked word reveals, scramble decodes, kinetic splits, and the useReveal composable API.

Production recipes for GSAP visual effects. Companion to official gsap-core and gsap-timeline skills (API reference). Triggers: glitch effect, cyberpunk glitch, RGB displacement, chromatic aberration, scramble text, jitter animation, noise bars, marquee, infinite scroll, directional marquee, rolling counter, animated number, count up, floating animation, yoyo, pulse ring, repeating timeline, GSAP VFX, visual effects, decorative animation, looping animation, footer bounce, morph bounce, elastic footer. Non-triggers: Not for scroll-driven reveals (use gsap-scroll), text-only animation (use gsap-text), SVG path/morph (use gsap-svg), or mouse-driven interaction (use gsap-interact). Outcome: Produces visual effects — glitch/chromatic aberration, infinite marquees, directional marquees, rolling counters, floating decorations, pulse rings, footer bounce reveals, and repeating timeline patterns.

Production recipes for GSAP animations rendered to HTML5 Canvas. Companion to official gsap-core and gsap-timeline skills (API reference). Triggers: canvas animation, GSAP canvas, particle system, canvas particles, canvas rendering, onUpdate canvas, draw loop, sprite animation, canvas timeline, canvas GSAP, canvas morph, MorphSVG canvas, shape morphing canvas. Non-triggers: Not for DOM-based animation (use gsap-animate), not for SVG DOM morphing (use gsap-svg), not for WebGL/Three.js. Outcome: Produces canvas-based animations using GSAP timelines with custom onUpdate rendering pipelines, particle systems, and resize handling.

Production-grade premium animation compositions from official GSAP showcases. Complete multi-plugin references for building beautiful, polished animations. Companion to official gsap-core, gsap-plugins, gsap-timeline skills (API reference). Triggers: premium animation, showcase, production animation, beautiful animation, hero animation, page transition, loading animation, immersive scroll, complete animation, polished animation, animation composition, multi-plugin animation. Non-triggers: Not for single-technique recipes (use gsap-scroll, gsap-text, etc.), not for API reference (use official gsap-skills), not for setup (use gsap-setup). Outcome: Provides a complete premium animation reference with orchestration notes, which gsap-animate then adapts using individual technique skills.

Production recipes for GSAP setup and configuration for any framework — Vue 3, Nuxt 3, React, or Next.js. Detects framework from project files and provides the correct setup pattern. Companion to official gsap-core and gsap-frameworks skills (API reference). Triggers: GSAP setup, GSAP install, gsap plugin, GSAP Nuxt, GSAP Vue setup, GSAP React setup, GSAP Next.js setup, gsap config, GSAP accessibility setup, reduced motion setup, animation project setup, useGSAP, gsap registerPlugin. Non-triggers: Not for animation patterns (use gsap-animate), ScrollTrigger (use gsap-scroll), text effects (use gsap-text), or performance tuning (use gsap-optimise). Outcome: Produces a working GSAP plugin/provider with registered plugins, effects, global defaults, and accessibility setup.