animejs

Installation

Summary

Anime.js adapter for HyperFrames that makes animations seek-driven and deterministic.

Register Anime.js animations and timelines on window.__hfAnime with autoplay: false so HyperFrames controls playback via seek(timeMs)
Supports both IIFE and ES module builds; adapter only requires objects exposing seek(), pause(), and play() methods
Works with single animations, timelines with sequential and offset keyframes, and multiple independent micro-animations in the same registry
Requires finite durations and loop counts; avoid callbacks based on wall-clock time, network state, or unseeded randomness

SKILL.md

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.