gsaplisted

# GSAP ## HyperFrames Contract HyperFrames controls GSAP through its `gsap` runtime adapter. Create a paused timeline synchronously, register it on `window.__timelines` with the exact `data-composition-id`, and let HyperFrames seek it. ```html <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <script> window.__timelines = window.__timelines || {}; const tl = gsap.timeline({ paused: true }); tl.from(".title", { y: 48, opacity: 0, duration: 0.6, ease: "power3.out" }, 0); tl.to(".accent", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.25); window.__timelines["main"] = tl; // key must equal data-composition-id on the composition root </script> ``` - The registry key must match the composition root's `data-composition-id`. - Do not call `tl.play()` for render-critical motion. - Do not build timelines inside async code, timers, or event handlers. - Keep loops finite. HyperFrames renders finite video durations. ## 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"` (def