gsaplisted

# GSAP ## Core Tween Methods - **gsap.to(targets, vars)** — animate from current state to `vars`. Most common. - **gsap.from(targets, vars)** — animate from `vars` to current state (entrances). - **gsap.fromTo(targets, fromVars, toVars)** — explicit start and end. - **gsap.set(targets, vars)** — apply immediately (duration 0). Always use **camelCase** property names (e.g. `backgroundColor`, `rotationX`). ## Common vars - **duration** — seconds (default 0.5). - **delay** — seconds before start. - **ease** — `"power1.out"` (default), `"power3.inOut"`, `"back.out(1.7)"`, `"elastic.out(1, 0.3)"`, `"none"`. - **stagger** — number `0.1` or object: `{ amount: 0.3, from: "center" }`, `{ each: 0.1, from: "random" }`. - **overwrite** — `false` (default), `true`, or `"auto"`. - **repeat** — number or `-1` for infinite. **yoyo** — alternates direction with repeat. - **onComplete**, **onStart**, **onUpdate** — callbacks. - **immediateRender** — default `true` for from()/fromTo(). Set `false` on later tweens targeting the same property+element to avoid overwrite. ## Transforms and CSS Prefer GSAP's **transform aliases** over raw `transform` string: | GSAP property | Equivalent | | --------------------------- | ------------------- | | `x`, `y`, `z` | translateX/Y/Z (px) | | `xPercent`, `yPercent` | translateX/Y in % | | `scale`, `scaleX`, `scaleY` | scale | | `rotation` | rotate (deg) | | `rotationX`,