skills.rest
hoanghd218
hoanghd218COMMUNITY
Explore all skills by this author →
GitHub

animejs

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

7|9|Updated May 9, 2026
Search Tags:#animation#adapter#animejs#timelines#web-animations#hyperframes#seek
One-click install
npx skills add https://github.com/hoanghd218/claude-code-2-days --skill animejs-hoanghd218
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
KamalabotKamalabot

animejs

Adapt Anime.js animations to HyperFrames' seek-driven playback via window.__hfAnime registry.

Community
Intermediate
libz-renlab-ailibz-renlab-ai
13

animejs

Integrate Anime.js animations into HyperFrames with seek-driven control.

Community
Intermediate
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
heygen-comheygen-com
40.2k

animejs

Convert Anime.js animations into seek-driven sequences registered on window.__hfAnime.

Official
Intermediate