From hyperframes
Provides GSAP reference for HyperFrames compositions, covering tweens (to/from/fromTo), timelines, easing, stagger, defaults, and performance (transforms, will-change, quickTo). Use when animating with GSAP in HyperFrames.
npx claudepluginhub ilderaj/agent-plugin-marketplace --plugin codex--hyperframesThis skill uses the workspace's default tool permissions.
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.
Provides GSAP animation reference tailored for HyperFrames, covering core tweens (to/from/fromTo/set), easing, stagger, defaults, timelines (positioning, labels, nesting, playback), and performance (transforms, will-change, quickTo). Activate when writing GSAP in HyperFrames.
Provides GSAP core API guidance: gsap.to(), from(), easing, stagger, matchMedia() for responsive/reduced-motion animations in JavaScript, React, Vue, Svelte, or vanilla DOM/SVG.
Guides GSAP and ScrollTrigger usage for web animations including tweens, timelines, scroll-triggered effects, pinning, scrubbing, and parallax on DOM, SVG, Canvas, WebGL.
Share bugs, ideas, or general feedback.
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.
<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>
data-composition-id.tl.play() for render-critical motion.vars. Most common.vars to current state (entrances).Always use camelCase property names (e.g. backgroundColor, rotationX).
"power1.out" (default), "power3.inOut", "back.out(1.7)", "elastic.out(1, 0.3)", "none".0.1 or object: { amount: 0.3, from: "center" }, { each: 0.1, from: "random" }.false (default), true, or "auto".-1 in HyperFrames. Compute repeats from the visible duration. yoyo — alternates direction with repeat.true for from()/fromTo(). Set false on later tweens targeting the same property+element to avoid overwrite.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 |
opacity. At 0: also sets visibility: hidden."--hue": 180.transformOrigin."360_cw", "-170_short", "90_ccw"."all" or comma-separated; removes inline styles on complete."+=20", "-=10", "*=2".gsap.to(".item", {
x: (i, target, targets) => i * 50,
stagger: 0.1,
});
Built-in eases: power1–power4, back, bounce, circ, elastic, expo, sine. Each has .in, .out, .inOut.
gsap.defaults({ duration: 0.6, ease: "power2.out" });
const tween = gsap.to(".box", { x: 100 });
tween.pause();
tween.play();
tween.reverse();
tween.kill();
tween.progress(0.5);
tween.time(0.2);
Runs setup only when a media query matches; auto-reverts when it stops matching.
let mm = gsap.matchMedia();
mm.add(
{
isDesktop: "(min-width: 800px)",
reduceMotion: "(prefers-reduced-motion: reduce)",
},
(context) => {
const { isDesktop, reduceMotion } = context.conditions;
gsap.to(".box", {
rotation: isDesktop ? 360 : 180,
duration: reduceMotion ? 0 : 2,
});
},
);
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });
Third argument controls placement:
1 — at 1s"+=0.5" — after end; "-=0.2" — before end"intro", "intro+=0.3""<" — same start as previous; ">" — after previous ends; "<0.2" — 0.2s after previous startstl.to(".a", { x: 100 }, 0);
tl.to(".b", { y: 50 }, "<"); // same start as .a
tl.to(".c", { opacity: 0 }, "<0.2"); // 0.2s after .b starts
tl.addLabel("intro", 0);
tl.to(".a", { x: 100 }, "intro");
tl.addLabel("outro", "+=0.5");
tl.play("outro");
tl.tweenFromTo("intro", "outro");
.play() to start.const master = gsap.timeline();
const child = gsap.timeline();
child.to(".a", { x: 100 }).to(".b", { y: 50 });
master.add(child, 0);
tl.play(), tl.pause(), tl.reverse(), tl.restart(), tl.time(2), tl.progress(0.5), tl.kill().
Animating x, y, scale, rotation, opacity stays on the compositor. Avoid width, height, top, left when transforms achieve the same effect.
will-change: transform;
Only on elements that actually animate.
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
container.addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
Use stagger instead of separate tweens with manual delays.
Pause or kill off-screen animations.
addLabel() for readable sequencing.packages/core/src/runtime/adapters/gsap.ts.