skills.rest
libz-renlab-ai
libz-renlab-aiCOMMUNITY
Explore all skills by this author →
GitHub

animejs

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

13|3|Updated Apr 22, 2026
Search Tags:#animation#web#animejs#timelines#hyperframes#seek
One-click install
npx skills add https://github.com/libz-renlab-ai/TeamBrain --skill animejs-libz-renlab-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animejs
Source: https://github.com/libz-renlab-ai/TeamBrain/tree/main/.agents/skills/animejs
Command: npx skills add https://github.com/libz-renlab-ai/TeamBrain --skill animejs-libz-renlab-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill facilitates the integration and control of Anime.js animations within HyperFrames compositions, enabling seek-driven, deterministic animations with ease.

Core Features & Use Cases

  • Create and register Anime.js animations during composition initialization for synchronized web animations.
  • Control animations via seek and pause commands, making them compatible with HyperFrames’ timeline.
  • Use case: Design interactive slideshows where Anime.js animations respond precisely to user navigation or timeline controls without relying on default autoplay or callbacks.

Quick Start

Load Anime.js, create an animation targeting a DOM element, disable autoplay, register the animation in window.__hfAnime, and then control it through HyperFrames' seeking functions.

Frequently Asked Questions about animejs

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

FAQPage Schema
How do I synchronize Anime.js animations with a timeline scrubber?▼

Register animations in window.__hfAnime with autoplay disabled, then drive them using HyperFrames seek commands to achieve deterministic, timeline-synchronized playback without relying on callbacks.

What are deterministic web animations and when do I need them?▼

Deterministic web animations respond precisely to seek and pause commands rather than default playback. They are needed when building interactive compositions where animations must align exactly with user navigation controls.

Can I use module-based Anime.js builds with HyperFrames?▼

Yes, this integration supports both standalone and module-based Anime.js builds. Load your preferred build, target a DOM element, disable autoplay, and register the animation in window.__hfAnime for control.

How to create seek-driven animations for interactive slideshows?▼

Load Anime.js, target a DOM element, disable autoplay, and register the animation in window.__hfAnime. HyperFrames subsequently controls the animation directly through its seek and pause commands.

Why does my Anime.js animation not respond to timeline navigation?▼

Animations fail to respond if autoplay remains enabled or the animation is not registered in window.__hfAnime. You must disable default autoplay and register the animation to allow HyperFrames seeking control.

Do I need to manually handle animation callbacks for interactive presentations?▼

No, you should disable autoplay and avoid relying on default callbacks. By registering the animation in window.__hfAnime, HyperFrames manages synchronized control directly via its seeking functions.

Related Skills

Explore More Design & Creative Skills→
KamalabotKamalabot

animejs

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

Community
Intermediate
xiaxianlinxiaxianlin
1

animejs

Register Anime.js animations for seek-driven control in HyperFrames compositions.

Community
Basic
1veso1veso

animejs

Integrate Anime.js animations into HyperFrames compositions with deterministic seeking.

Community
Intermediate
whyiloveher2411whyiloveher2411

hyperframes-core

Create HTML compositions with video, animation, and interactive elements using data attributes and timelines.

Community
Advanced