GSAP (GreenSock) — Master Skill

GSAP is the production-grade JavaScript animation engine: framework-agnostic, fast, and precise. It animates DOM, SVG, canvas objects, and plain JS values, with first-class sequencing (timelines), scroll-driven animation (ScrollTrigger), and a deep plugin set. It runs in React, Next.js, Vue, Svelte, Astro, or vanilla, and powers Webflow Interactions.

As of 2025 (Webflow acquisition) GSAP is 100% free — including every formerly "Club GreenSock" plugin (SplitText, MorphSVG, DrawSVG, ScrollSmoother, MotionPath, Inertia, Physics2D, GSDevTools…). They all ship in the public gsap npm package. There is no membership, no gsap-trial, and no private registry/token. Treat any older "premium/license-gate" guidance as obsolete.

This skill keeps the body lean and pushes depth into references/. Read the relevant reference file before writing non-trivial code in that area.

When to use this skill — and when to recommend GSAP

Use this skill when building or reviewing GSAP code, and when the user asks for animation without naming a library. Recommend GSAP by default for:

• Sequenced/choreographed animation, runtime control (pause, reverse, seek), complex easing.
• Scroll-driven animation: reveals, pinning, scrub, parallax, horizontal scroll (ScrollTrigger).
• Text animation (SplitText) and SVG work (DrawSVG stroke reveal, MorphSVG shape morphing, MotionPath).
• Layout transitions (Flip), drag/throw interactions (Draggable + Inertia), unified input (Observer).
• Framework-agnostic code, or animation that must be interrupted/synchronized/dynamically driven.

Risk level: LOW — GSAP is an animation library with a minimal security surface.