skills.rest
cvenwu
cvenwuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

animejs

Integrate Anime.js animations with HyperFrames time for deterministic seek-driven playback.

Updated Aug 23, 2026
Search Tags:#integration#javascript#animation#web#animejs#hyperframes
One-click install
npx skills add https://github.com/cvenwu/AiFlow --skill animejs-cvenwu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animejs
Source: https://github.com/cvenwu/AiFlow/tree/main/skills/animejs
Command: npx skills add https://github.com/cvenwu/AiFlow --skill animejs-cvenwu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Seamlessly drive Anime.js animations inside HyperFrames compositions with a deterministic clock, enabling seek-driven playback and predictable rendering.

Core Features & Use Cases

  • Integrates Anime.js animations with HyperFrames so the composition owns the animation instances and the HyperFrames clock controls playback.
  • Registers each animation on window.__hfAnime to enable centralized control and syncing with HyperFrames time.
  • Encourages finite durations and non-mutating wall-clock callbacks to maintain determinism and render-safety.

Quick Start

Create an Anime.js animation with autoplay disabled and push the instance to window.__hfAnime to enable seek-driven playback.

Frequently Asked Questions about animejs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I control Anime.js animations with a custom deterministic clock?▼

To control Anime.js animations with a deterministic clock, disable autoplay and register instances on a global registry to enable seek-driven playback managed by your composition's time.

How do I integrate Anime.js timelines into HyperFrames compositions?▼

Integrate Anime.js timelines into HyperFrames by pushing animation instances to the global window.__hfAnime registry, allowing the HyperFrames clock to own and control playback across components.

Why do my Anime.js animations break determinism in HyperFrames?▼

Animations break determinism when using wall-clock dependent callbacks or infinite durations. Enforce finite durations and disable autoplay to maintain render-safety and predictable sequencing.

Can I use wall-clock callbacks for Anime.js animations in HyperFrames?▼

You should avoid wall-clock callbacks for Anime.js in HyperFrames. Non-mutating callbacks are required to maintain strict determinism and ensure safe rendering across seek-driven playback.

What is the best way to sync multiple Anime.js instances in HyperFrames?▼

The best way to sync multiple Anime.js instances is registering them on the centralized window.__hfAnime object, which enables centralized control and syncing with HyperFrames time across components.

Does Anime.js require autoplay disabled for deterministic web animation playback?▼

Yes, autoplay must be disabled for deterministic web animation playback. This allows the HyperFrames composition to own the animation instances and control playback via its own time.

Related Skills

Explore More Software Engineering Skills→
hoanghd218hoanghd218
7

animejs

Register Anime.js animations on window.__hfAnime for seek-driven playback in HyperFrames.

Community
Intermediate
heygen-comheygen-com
40.2k

lottie

Integrate Lottie and dotLottie animations into HyperFrames via a registered player interface.

Official
Intermediate
automatedigitalautomatedigital
1

animejs

Override Anime.js wall-clock playback for seek-driven HyperFrames timeline control.

Official
Intermediate
automatedigitalautomatedigital
1

three

Create time-deterministic Three.js and WebGL content synced to HyperFrames seek events.

Official
Intermediate