Verified:GitHub

animejs

7|9|Updated May 9, 2026

Search Tags:#animation #adapter #animejs #timelines #web-animations #hyperframes #seek

Ready to run

npx skills add https://github.com/hoanghd218/claude-code-2-days --skill animejs-hoanghd218

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: animejs
Source: https://github.com/hoanghd218/claude-code-2-days/tree/main/.agents/skills/animejs
Command: npx skills add https://github.com/hoanghd218/claude-code-2-days --skill animejs-hoanghd218

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HyperFrames cannot directly control Anime.js timelines without a registry mechanism; this skill provides a deterministic adapter by exposing created animations on window.__hfAnime so they can be scrubbed and synced to HyperFrames time.

Core Features & Use Cases

Register animations or timelines on window.__hfAnime for seek-driven playback.
Disable autoplay to ensure HyperFrames drives the clock with finite durations and loop counts.
Use with both simple animations and complex timelines to synchronize visuals in HyperFrames compositions.

Quick Start

Create an Anime.js animation with autoplay: false and push the instance to window.__hfAnime to enable HyperFrames time-based seeking.

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 timelines in HyperFrames?▼

To control Anime.js timelines in HyperFrames, you register animations on the window.__hfAnime object. This exposes the instances for seek-driven playback, allowing HyperFrames to directly scrub and sync the animation clock.

Why does my Anime.js animation not sync with HyperFrames time?▼

Animations fail to sync when created with autoplay enabled. You must set autoplay to false during creation so HyperFrames can drive the clock deterministically, ensuring the animation seeks accurately based on the timeline.

Can I scrub complex Anime.js timelines using HyperFrames?▼

Yes, you can scrub complex Anime.js timelines in HyperFrames. The adapter supports small to large workflows by registering timelines on window.__hfAnime, enabling synchronized scrubbing and looping within compositions.

What are the limitations of deterministic Anime.js seek-driven playback?▼

Deterministic seek-driven playback requires finite durations and loop counts. You must disable autoplay and register instances on window.__hfAnime; infinite loops or unregistered animations will break the synchronization mechanism.

What is the best way to synchronize web animations with HyperFrames?▼

The best way to synchronize web animations is using a deterministic adapter that registers Anime.js instances on window.__hfAnime. This exposes the animations for seek-driven playback, allowing HyperFrames to coordinate the timing.