skills.rest
heygen-com
heygen-comOFFICIAL
Explore all skills by this author →
GitHub

animejs

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
One-click install
npx skills add https://github.com/heygen-com/hyperframes --skill animejs-heygen-com
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
libz-renlab-ailibz-renlab-ai
13

animejs

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

Community
Intermediate
KamalabotKamalabot

animejs

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

Community
Intermediate
automatedigitalautomatedigital
1

animejs

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

Official
Intermediate
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate