hyperframes 0.5.0-alpha.11 → 0.5.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +172 -17
- package/dist/docs/rendering.md +4 -1
- package/dist/hyperframe-runtime.js +18 -18
- package/dist/hyperframe.manifest.json +1 -1
- package/dist/hyperframe.runtime.iife.js +18 -18
- package/dist/skills/gsap/SKILL.md +30 -1
- package/dist/studio/assets/{index-Bl4Deziq.js → index-JhhmFie-.js} +31 -31
- package/dist/studio/index.html +1 -1
- package/dist/templates/_shared/CLAUDE.md +5 -0
- package/package.json +1 -1
|
@@ -5,6 +5,28 @@ description: GSAP animation reference for HyperFrames. Covers gsap.to(), from(),
|
|
|
5
5
|
|
|
6
6
|
# GSAP
|
|
7
7
|
|
|
8
|
+
## HyperFrames Contract
|
|
9
|
+
|
|
10
|
+
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.
|
|
11
|
+
|
|
12
|
+
```html
|
|
13
|
+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
14
|
+
<script>
|
|
15
|
+
window.__timelines = window.__timelines || {};
|
|
16
|
+
const tl = gsap.timeline({ paused: true });
|
|
17
|
+
|
|
18
|
+
tl.from(".title", { y: 48, opacity: 0, duration: 0.6, ease: "power3.out" }, 0);
|
|
19
|
+
tl.to(".accent", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.25);
|
|
20
|
+
|
|
21
|
+
window.__timelines["main"] = tl; // key must equal data-composition-id on the composition root
|
|
22
|
+
</script>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
- The registry key must match the composition root's `data-composition-id`.
|
|
26
|
+
- Do not call `tl.play()` for render-critical motion.
|
|
27
|
+
- Do not build timelines inside async code, timers, or event handlers.
|
|
28
|
+
- Keep loops finite. HyperFrames renders finite video durations.
|
|
29
|
+
|
|
8
30
|
## Core Tween Methods
|
|
9
31
|
|
|
10
32
|
- **gsap.to(targets, vars)** — animate from current state to `vars`. Most common.
|
|
@@ -21,7 +43,7 @@ Always use **camelCase** property names (e.g. `backgroundColor`, `rotationX`).
|
|
|
21
43
|
- **ease** — `"power1.out"` (default), `"power3.inOut"`, `"back.out(1.7)"`, `"elastic.out(1, 0.3)"`, `"none"`.
|
|
22
44
|
- **stagger** — number `0.1` or object: `{ amount: 0.3, from: "center" }`, `{ each: 0.1, from: "random" }`.
|
|
23
45
|
- **overwrite** — `false` (default), `true`, or `"auto"`.
|
|
24
|
-
- **repeat** — number
|
|
46
|
+
- **repeat** — finite number; never `-1` in HyperFrames. Compute repeats from the visible duration. **yoyo** — alternates direction with repeat.
|
|
25
47
|
- **onComplete**, **onStart**, **onUpdate** — callbacks.
|
|
26
48
|
- **immediateRender** — default `true` for from()/fromTo(). Set `false` on later tweens targeting the same property+element to avoid overwrite.
|
|
27
49
|
|
|
@@ -209,3 +231,10 @@ Pause or kill off-screen animations.
|
|
|
209
231
|
- Chain animations with delay when a timeline can sequence them.
|
|
210
232
|
- Create tweens before the DOM exists.
|
|
211
233
|
- Skip cleanup — always kill tweens when no longer needed.
|
|
234
|
+
- Use infinite repeat values in HyperFrames compositions. Use finite repeat counts computed from the visible duration.
|
|
235
|
+
|
|
236
|
+
## Credits And References
|
|
237
|
+
|
|
238
|
+
- HyperFrames adapter source: `packages/core/src/runtime/adapters/gsap.ts`.
|
|
239
|
+
- GSAP documentation: https://gsap.com/docs/v3/
|
|
240
|
+
- GSAP timeline pause and seek behavior: https://gsap.com/docs/v3/GSAP/Timeline/pause%28%29/
|