mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 17:30:50 +00:00
## 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
775 B
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.__timelineswith 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