name	gsap
description	Comprehensive GSAP v3 skill for fundamentals, plugins, and useful tools. Use when implementing or reviewing animations, timelines, ScrollTrigger flows, and plugin-driven motion systems.
metadata	{"author":"Luca Argentieri","version":"2026.02.18","source":"Generated from GSAP docs index https://gsap.com/llms.txt and docs pages under https://gsap.com/docs/v3/"}

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

Identify the animation type (basic tween, sequence, scroll-driven, morph/path, drag/physics).
Select the minimum plugin set needed and register plugins once.
Build with Timeline first for non-trivial choreography.
Apply responsiveness and cleanup (matchMedia, context/revert) early.
Add debug tooling (markers, GSDevTools, logging) before fine-tuning easing/timing.
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.