Files
hyperframes/packages/cli/src/docs/gsap.md
T
Vance Ingalls 20be2ea1c2 style: apply oxfmt baseline formatting across all source files (#25)
## Summary
- Run `oxfmt .` across the entire codebase to establish formatted baseline
- 299 files changed — mechanical formatting only, no logic changes
- Double quotes, semicolons, 2-space indent, trailing commas, 100 print width

Part 3/4 of [VA-851](https://linear.app/heygen/issue/VA-851/pre-migration-configure-eslint-prettier-and-conventional-commits)

## Test plan
- [x] `pnpm format:check` — all 426 files pass
- [x] `pnpm -r typecheck` — all packages pass
- [x] `pnpm build` — all packages build
- [x] All 348 tests pass
2026-03-23 17:15:14 -07:00

775 B

GSAP Animation

HyperFrames uses GSAP for animation. Timelines are paused and controlled by the runtime.

Setup

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
  const tl = gsap.timeline({ paused: true });
  tl.to("#title", { opacity: 1, duration: 0.5 }, 0);
  window.__timelines = window.__timelines || {};
  window.__timelines["root"] = tl;
</script>

Key Rules

  • Always create timelines with { paused: true }
  • Register timelines on window.__timelines with the composition ID as key
  • Position parameter (3rd arg) sets absolute time: tl.to(el, vars, 1.5)
  • Supported methods: set, to, from, fromTo

Supported Properties

opacity, x, y, scale, scaleX, scaleY, rotation, width, height, visibility