skills.rest
automatedigital
automatedigitalOFFICIAL
Explore all skills by this author →
WebsiteGitHub

animejs

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

1|Updated Apr 24, 2026
Search Tags:#timeline#frontend#animation#svg#animejs#hyperframes#seek-driven
One-click install
npx skills add https://github.com/automatedigital/spark --skill animejs-automatedigital
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animejs
Source: https://github.com/automatedigital/spark/tree/main/skills/creative/animejs
Command: npx skills add https://github.com/automatedigital/spark --skill animejs-automatedigital

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Default Anime.js relies on its own internal wall-clock for playback, which is incompatible with HyperFrames' seek-driven composition timeline. This causes animations to play out of sync or ignore timeline controls entirely, breaking interactive and scrubbable content.

Core Features & Use Cases

  • Provides adapter patterns to make Anime.js instances fully controllable via HyperFrames' timeline for deterministic, scrubbable playback
  • Supports both standard script tag and ES module Anime.js builds for flexible integration
  • Includes ready-to-use patterns for single animations and multi-step timelines
  • Use case: Build interactive HyperFrames product demos, UI prototypes, or educational content with smooth micro-animations using familiar Anime.js syntax without playback sync issues

Quick Start

Use the animejs skill to create a seek-driven Anime.js fade-in animation for the .hero element in your HyperFrames composition.

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 seek-driven timeline?▼

To sync Anime.js animations with a seek-driven timeline, you must disable autoplay and register all instances to a window.__hfAnime array, allowing an adapter to control playback deterministically instead of relying on wall-clock advancement.

Why do my Anime.js micro-animations play out of sync in interactive compositions?▼

Anime.js animations play out of sync because the library relies on its internal wall-clock, which is incompatible with seek-driven composition timelines. Overriding this default advancement ensures animations respond correctly to scrubbable timeline controls.

How to build scrubabble DOM and SVG timeline sequences for frontend prototypes?▼

Build scrubabble DOM and SVG timeline sequences by creating Anime.js instances with autoplay disabled, registering them to the window.__hfAnime array, and applying adapter patterns to map animation frames directly to the composition timeline.

Does Anime.js work with HyperFrames for deterministic UI prototype playback?▼

Anime.js works with HyperFrames for deterministic UI prototype playback by using a specific adapter that overrides default wall-clock advancement, ensuring all micro-animations remain fully controllable via the composition timeline.

What are the limitations of using default Anime.js playback in HyperFrames compositions?▼

The limitation of using default Anime.js playback is that it ignores composition timeline controls entirely, causing interactive and scrubbable content to break. You must explicitly register instances with autoplay disabled to avoid sync issues.

Can I use ES module builds of Anime.js for frontend micro-animations in HyperFrames?▼

Yes, you can use ES module builds of Anime.js for frontend micro-animations in HyperFrames. The adapter patterns support both standard script tag and ES module builds for flexible integration into your compositions.

Related Skills

Explore More Software Engineering Skills→
KamalabotKamalabot

animejs

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

Community
Intermediate
1veso1veso

animejs

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

Community
Intermediate
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
automatedigitalautomatedigital
1

waapi

Create deterministic DOM animations using native WAAPI within HyperFrames playback contexts.

Official
Intermediate