Docs 16,346 installs

Anime.js for HyperFrames

by heygen-com/hyperframes

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on…

Skill content

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

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