gsap
Installation
Summary
GSAP animation reference for HyperFrames compositions with timelines, easing, transforms, and performance guidance.
- Create paused timelines synchronously and register them on
window.__timelineskeyed bydata-composition-idfor HyperFrames to seek and control - Core methods:
gsap.to(),gsap.from(),gsap.fromTo(),gsap.set()with support for stagger, easing, callbacks, and relative values - Use transform aliases (
x,y,scale,rotation) andautoAlphafor optimal performance; avoid layout property animations - Timeline sequencing via position parameter (
"<","+=0.5", labels) and nesting for complex multi-element choreography - Includes
gsap.quickTo()for high-frequency updates,gsap.matchMedia()for responsive and accessibility-aware animations, and finite repeat counts only
SKILL.md
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.
<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>