animejs

Name: animejs
Availability: InStock
Author: HeyGen

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

40.2k|3.8k|Updated Mar 10, 2026

Search Tags:#animation #deterministic #adapter #animejs #timelines #hyperframes

Ready to run

npx skills add https://github.com/heygen-com/hyperframes --skill animejs-heygen-com

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: animejs
Source: https://github.com/heygen-com/hyperframes/tree/main/skills/animejs
Command: npx skills add https://github.com/heygen-com/hyperframes --skill animejs-heygen-com

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HyperFrames needs a reliable way to drive and sync Anime.js animations within compositions, ensuring deterministic playback controlled by the HyperFrames clock and avoiding automatic, wall-clock progression.

Core Features & Use Cases

Seek-driven Anime.js instances registered on window.__hfAnime to participate in HyperFrames timelines.
Disable autoplay and use finite durations so animations render predictably across scrubbing and rendering passes.
Supports both single animations and timelines, with ES module or UMD builds as applicable.

Quick Start

Create and register at least one non-autoplay Anime.js animation on window.__hfAnime during initialization to enable deterministic, scrub-friendly playback.

Frequently Asked Questions about animejs

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

FAQPage Schema

How do I sync Anime.js animations with a HyperFrames composition clock?▼

To sync Anime.js animations with HyperFrames, you must disable autoplay and register each animation instance to window.__hfAnime, ensuring deterministic playback driven by the HyperFrames clock.

Why do my Anime.js timelines break when scrubbing through HyperFrames?▼

Anime.js timelines break during scrubbing if autoplay is enabled. You must disable autoplay and use finite durations to ensure animations render predictably across HyperFrames scrubbing and rendering passes.

Can I use standard Anime.js instances inside HyperFrames without an adapter?▼

Standard Anime.js instances lack the required seek() and pause() methods for deterministic control. Using the adapter registers instances on window.__hfAnime to enable seek-driven playback within HyperFrames.

How to set up deterministic Anime.js animations for HyperFrames step by step?▼

Create an Anime.js animation with autoplay disabled, ensure it has a finite duration, and register the instance to window.__hfAnime during initialization to enable deterministic, scrub-friendly playback.

Does the Anime.js adapter support both single animations and complex timelines?▼

Yes, the Anime.js adapter supports both single animations and complex timelines. Both must be registered to window.__hfAnime with autoplay disabled to participate in HyperFrames sequences.

What limitations exist when using Anime.js within HyperFrames compositions?▼

Limitations include requiring autoplay to be false and needing finite durations. Each instance must be registered on window.__hfAnime and expose seek() and pause() methods to avoid automatic, wall-clock progression.