gsap

GSAP is a high-performance animation platform centered around Tweens and Timelines, with optional plugins for advanced capabilities like scroll-driven animation, text splitting, SVG morphing, drag interactions, and physics.

This skill is structured to mirror GSAP docs sections as closely as possible, with practical, implementation-focused guidance for coding agents.

Scope baseline: GSAP v3 docs and linked resources. If GSAP docs update, refresh this skill and references/docs-coverage-map.md.

Fundamentals

Topic	Description	Reference
Core model	GSAP object, Tween/Timeline mental model, control surface	fundamentals-core
Tween + Timeline	Sequencing, position parameter, labels, control methods	fundamentals-tween-timeline
CSS + Eases	Core CSS plugin, easing families, custom eases strategy	fundamentals-css-eases

Plugins

Topic	Description	Reference
Plugin architecture	Registration, loading, tree-shaking-safe setup, dependencies	plugins-overview
Scroll plugins	ScrollTrigger, ScrollSmoother, ScrollToPlugin patterns	plugins-scroll
Text plugins	SplitText, ScrambleTextPlugin, TextPlugin workflows	plugins-text
SVG plugins	DrawSVG, MorphSVG, MotionPath, MotionPathHelper	plugins-svg
UI plugins	Flip, Draggable, InertiaPlugin, Observer integration	plugins-ui
Other + eases	Physics, GSDevTools, Easel/Pixi, CustomEase/EasePack	plugins-other-and-eases

Useful Features & Tools

Topic	Description	Reference
Utility methods	Full gsap.utils usage map and compositional patterns	useful-utility-methods
Helper functions	Canonical GSAP helper-function catalog and practical picks	useful-helper-functions
Staggers + React	Stagger design, useGSAP integration, app architecture tips	useful-react-staggers-tools

Agent workflow

1. Identify the animation type (basic tween, sequence, scroll-driven, morph/path, drag/physics).
2. Select the minimum plugin set needed and register plugins once.
3. Build with Timeline first for non-trivial choreography.
4. Apply responsiveness and cleanup (matchMedia, context/revert) early.
5. Add debug tooling (markers, GSDevTools, logging) before fine-tuning easing/timing.
6. Remove debug artifacts and verify accessibility/performance before handoff.

Cross-cutting best practices

• Prefer timelines over many disconnected tweens.
• Keep selectors scoped; avoid accidental global target sets.
• Use gsap.context() / revert() in componentized apps to avoid leaks.
• Register plugins once at app/module startup when possible.
• Guard expensive scroll effects and heavy text splitting behind intent/viewport checks.
• Use transform/opacity whenever possible to maintain rendering performance.
• For SSR frameworks, run DOM-dependent animation code only on client lifecycle hooks.

Coverage map

Complete mapping to GSAP docs families and high-value pages:

• docs-coverage-map