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