gsap

SKILL.md

GSAP animation reference for HyperFrames compositions with timelines, easing, transforms, and performance guidance.

Create paused timelines synchronously and register them on window.__timelines keyed by data-composition-id for 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) and autoAlpha for 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

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>