Gsap
Author GSAP motion that HyperFrames can seek frame-by-frame when building programmatic video compositions.
Overview
GSAP is an agent skill for the Build phase that documents how to write seek-safe GSAP timelines for HyperFrames video compositions.
Install
npx skills add https://github.com/heygen-com/hyperframes --skill gsapWhat is this skill?
- Documents gsap.to(), from(), fromTo(), easing, stagger, and timeline defaults for HyperFrames
- HyperFrames contract: paused gsap.timeline(), register on window.__timelines keyed by data-composition-id
- Timeline controls: position parameter, labels, nesting, playback—without render-breaking tl.play()
- Performance guidance: transforms, will-change, and quickTo for smoother seeks
- Explicit anti-patterns: no async timeline builds, no infinite loops (finite video duration)
- References GSAP 3.14.2 CDN build
- Core tween methods: to, from, fromTo plus timeline APIs
Adoption & trust: 84.1k installs on skills.sh; 25.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need motion in a HyperFrames composition but default GSAP patterns (play, async builds) break frame-accurate rendering.
Who is it for?
Indie builders shipping HyperFrames or similar frame-seek video pipelines with GSAP 3.x in HTML compositions.
Skip if: General React SPAs or sites where timelines auto-play on load and no HyperFrames registry contract applies.
When should I use this skill?
Writing GSAP animations in HyperFrames compositions.
What do I get? / Deliverables
You produce a paused, synchronously registered timeline that HyperFrames can seek using the correct data-composition-id registry key.
- Paused gsap.timeline registered on window.__timelines
- Finite, seek-safe tween sequences tied to composition id
Recommended Skills
Journey fit
How it compares
A composition contract reference, not a generic GSAP tutorial or a separate animation MCP server.
Common Questions / FAQ
Who is gsap for?
Solo builders and small teams authoring HyperFrames compositions who need GSAP motion that survives deterministic video rendering.
When should I use gsap?
During Build (front-end compositions) when you add entrances, accents, or staggered UI motion and must register timelines on window.__timelines without calling play().
Is gsap safe to install?
Review the Security Audits panel on this Prism page and inspect the skill source before letting an agent edit composition HTML or load CDN scripts.
SKILL.md
READMESKILL.md - Gsap
# 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"` (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** — finite number; never `-1` in HyperFrames. Compute repeats from the visible duration. **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`, `rotationY` | 3D rotate | | `skewX`, `skewY` | skew | | `transformOrigin` | transform-origin | - **autoAlpha** — prefer over `opacity`. At 0: also sets `visibility: hidden`. - **CSS variables** — `"--hue": 180`. - **svgOrigin** _(SVG only)_ — global SVG coordinate space origin. Don't combine with `transformOrigin`. - **Directional rotation** — `"360_cw"`, `"-170_short"`, `"90_ccw"`. - **clearProps** — `"all"` or comma-separated; removes inline styles on complete. - **Relative values** — `"+=20"`, `"-=10"`, `"*=2"`. ## Function-Based Values ```javascript gsap.to(".item", { x: (i, target, targets) => i * 50, stagger: 0.1, }); ``` ## Easing Built-in eases: `power1`–`power4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine`. Each has `.in`, `.out`, `.inOut`. ## Defaults ```javascript gsap.defaults({ duration: 0.6, ease: "power2.out" }); ``` ## Controlling Tweens ```javascript const tween = gsap.to(".box", { x: 100 }); tween.pause(); tween.play(); tween.reverse(); tween.kill(); tween.progress(0.5); tween.time(0.2); ``` ## gsap.matchMedia() (Responsive + Accessibility) Ru