mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
Miguel Angel Simon Sierra
cf7c1d7609
Scaffolded projects' npm run check now invokes the single check command instead of chaining lint, validate, and inspect (three Chrome boots become one). The CLI skill, its correctness reference, the entry skill's capability map, README/docs catalog rows, the Mintlify CLI page (new check section, deprecation banner on inspect), template CLAUDE/AGENTS (byte-identical), root CLAUDE/AGENTS, and every creation-workflow skill that taught the old sequence all point at check. snapshot keeps its standalone sections; validate/inspect stay documented as deprecated aliases with their check equivalents.
115 lines
3.2 KiB
Markdown
115 lines
3.2 KiB
Markdown
---
|
|
name: hyperframes-animejs
|
|
description: Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.
|
|
---
|
|
|
|
# Anime.js for HyperFrames
|
|
|
|
HyperFrames can seek Anime.js instances through its `animejs` runtime adapter. The composition owns the animation objects; HyperFrames owns the clock.
|
|
|
|
## Contract
|
|
|
|
- Create animations or timelines synchronously during composition initialization.
|
|
- Set `autoplay: false` so Anime.js does not advance on its own clock.
|
|
- Register every returned animation or timeline on `window.__hfAnime`.
|
|
- Use finite durations and loop counts.
|
|
- Avoid callbacks that mutate DOM based on wall-clock time, network state, or unseeded randomness.
|
|
|
|
The adapter seeks every registered instance with `instance.seek(timeMs)`, where `timeMs` is HyperFrames time in milliseconds.
|
|
|
|
## Basic Pattern
|
|
|
|
```html
|
|
<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
|
|
<script>
|
|
const anim = anime({
|
|
targets: ".mark",
|
|
translateX: 280,
|
|
rotate: "1turn",
|
|
opacity: [0, 1],
|
|
duration: 1200,
|
|
easing: "easeOutExpo",
|
|
autoplay: false,
|
|
});
|
|
|
|
window.__hfAnime = window.__hfAnime || [];
|
|
window.__hfAnime.push(anim);
|
|
</script>
|
|
```
|
|
|
|
## Timeline Pattern
|
|
|
|
```html
|
|
<script>
|
|
const tl = anime.timeline({
|
|
autoplay: false,
|
|
easing: "easeOutCubic",
|
|
});
|
|
|
|
tl.add({
|
|
targets: ".title",
|
|
translateY: [40, 0],
|
|
opacity: [0, 1],
|
|
duration: 650,
|
|
}).add(
|
|
{
|
|
targets: ".accent",
|
|
scaleX: [0, 1],
|
|
duration: 450,
|
|
},
|
|
250,
|
|
);
|
|
|
|
window.__hfAnime = window.__hfAnime || [];
|
|
window.__hfAnime.push(tl);
|
|
</script>
|
|
```
|
|
|
|
## Module Builds
|
|
|
|
If you use an ES module build, the adapter does not care how the instance was created. It only needs the returned object to expose `seek()`, `pause()`, and preferably `play()`:
|
|
|
|
```html
|
|
<script type="module">
|
|
import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";
|
|
|
|
const anim = animate(".chip", {
|
|
x: "18rem",
|
|
duration: 900,
|
|
autoplay: false,
|
|
});
|
|
|
|
window.__hfAnime = window.__hfAnime || [];
|
|
window.__hfAnime.push(anim);
|
|
</script>
|
|
```
|
|
|
|
## Good Uses
|
|
|
|
- Small SVG and DOM flourishes where Anime.js syntax is compact.
|
|
- Imported Anime.js examples that can be made seek-driven.
|
|
- Multiple independent micro-animations pushed into the same registry.
|
|
|
|
Use GSAP for complex scene sequencing unless the user specifically asks for Anime.js. GSAP is still the primary HyperFrames authoring path.
|
|
|
|
## Avoid
|
|
|
|
- Leaving `autoplay` at the Anime.js default.
|
|
- Depending on `anime.running` auto-discovery instead of explicit `window.__hfAnime.push(...)`.
|
|
- Infinite loops. Compute a finite repeat count from the composition duration.
|
|
- Building animations in timers, promises, event handlers, or after async asset loads.
|
|
|
|
## Validation
|
|
|
|
After editing a composition that uses Anime.js:
|
|
|
|
```bash
|
|
npx hyperframes lint
|
|
npx hyperframes check
|
|
```
|
|
|
|
## Credits And References
|
|
|
|
- HyperFrames adapter source: `packages/core/src/runtime/adapters/animejs.ts`.
|
|
- Anime.js documentation for `autoplay`, `pause()`, and `seek()`: https://animejs.com/documentation/
|