gsaplisted
Install: claude install-skill claude-dev-suite/claude-dev-suite
# GSAP Skill
GreenSock Animation Platform — high-performance JS animation engine with plugin ecosystem.
## Install
```bash
npm install gsap
# Plugins (ScrollTrigger free, others require club membership):
# ScrollTrigger, Flip, Observer, ScrollSmoother — included in gsap package
```
## Core API
```ts
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Flip } from "gsap/Flip";
gsap.registerPlugin(ScrollTrigger, Flip);
```
| Method | Purpose |
|--------|---------|
| `gsap.to(target, vars)` | Animate FROM current state TO vars |
| `gsap.from(target, vars)` | Animate FROM vars TO current state |
| `gsap.fromTo(target, from, to)` | Explicit start and end |
| `gsap.set(target, vars)` | Instant set, no animation |
| `gsap.timeline(vars)` | Sequence multiple tweens |
| `gsap.context(fn, scope)` | Scope cleanup (React) |
| `gsap.matchMedia()` | Responsive animations |
## Tween Properties
```ts
gsap.to(".box", {
x: 100, // translateX (px)
y: -50, // translateY
rotation: 360, // degrees
scale: 1.5,
opacity: 0,
duration: 1,
delay: 0.2,
ease: "power2.out",
stagger: 0.1, // when targeting multiple elements
repeat: -1, // -1 = infinite
yoyo: true, // reverse on repeat
onComplete: () => console.log("done"),
});
```
## Easing Reference
| Ease | Character |
|------|-----------|
| `power1-4.in/out/inOut` | Polynomial — power2.out is the go-to |
| `elastic.out(1, 0.3)` | Springy bounce |
| `