back
loading skill details...
Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on windo...
---
name: 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 validate
```
## 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/
don't have the plugin yet? install it then click "run inline in claude" again.
added explicit inputs section with cdn/module details, split original contract into procedure steps with io signatures, extracted decision logic into decision points section covering gsap fallback and edge cases like infinite loops and conditional playback, clarified output contract with data format and validation commands, defined outcome signal through visual/runtime verification.
use anime.js inside hyperframes compositions by registering animation instances on window.__hfAnime and setting autoplay: false so hyperframes controls playback and seek via its own clock. the adapter makes anime.js deterministic and frame-accurate instead of wall-clock-driven. use this skill when you have compact svg or dom flourishes, imported anime.js examples to port, or multiple micro-animations that don't need gsap's scene sequencing overhead.
.mark, .title, .accent)optional:
window.__hfAnime array pre-initialized (skill handles init if missing)load anime.js library (iife from cdn or es module import).
anime global available in scopecreate animation or timeline object synchronously during composition init with autoplay: false.
seek(), pause(), play() methods)const anim = anime({ targets: ".mark", translateX: 280, duration: 1200, autoplay: false })register the instance on window.__hfAnime array.
window.__hfAnimewindow.__hfAnime = window.__hfAnime || []; window.__hfAnime.push(anim);(timeline only) chain animation segments with .add() and optional offset.
tl.add({ targets: ".title", ... }, 250);hyperframes runtime calls instance.seek(timeMs) on each registered instance at each frame.
autoplay: true (must change to false) and for callbacks that depend on wall-clock time or external state (remove them).repeat or loop count from composition duration divided by animation duration. do not use loop: true.seek(), pause(), and play() methods. iife bundles always do; custom builds may not.success is:
autoplay: false and finite durationwindow.__hfAnime array before composition mountsseek(timeMs) method (callable without error)npx hyperframes lint or npx hyperframes validateseek() with no lag or driftfile location: animations defined inline in composition html <script> block or imported as module. no separate file required.
data format: window.__hfAnime is an array of objects. each object must have signature { seek(ms): void, pause(): void, play(): void }.
you know the skill worked when:
seek() or undefined window.__hfAnimenpx hyperframes validate passes