skills.rest
hugotown
hugotownCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

animejs

Registers Anime.js animations as seek-driven instances inside HyperFrames compositions.

Updated Oct 16, 2025
Search Tags:#timeline#javascript#animation#animejs#deterministic rendering#hyperframes#seek-driven
One-click install
npx skills add https://github.com/hugotown/dotfiles --skill animejs-hugotown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animejs
Source: https://github.com/hugotown/dotfiles/tree/main/agents/skills/animejs
Command: npx skills add https://github.com/hugotown/dotfiles --skill animejs-hugotown

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires animejs.

What problem does it solve? Anime.js animations run on their own clock by default, which breaks deterministic frame rendering in HyperFrames. This Skill provides the adapter contract and patterns to make Anime.js animations seekable and render-safe inside HyperFrames compositions. ## Core Features & Use Cases - Seek-Driven Registration: Push animations and timelines onto window.__hfAnime so HyperFrames controls time via instance.seek(timeMs). - Timeline Patterns: Build multi-target Anime.js timelines with autoplay disabled and finite durations for deterministic playback. - Module and IIFE Support: Works with both the CDN IIFE build and ES module imports, as long as instances expose seek() and pause(). - Use Case: You are porting an Anime.js example into a HyperFrames composition and need it to render identically at any frame; follow the contract to disable autoplay, register the instance, and validate with npx hyperframes lint. ## Quick Start Convert my Anime.js animation into a seek-driven HyperFrames composition by disabling autoplay and registering it on window.__hfAnime.

Frequently Asked Questions about animejs

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

FAQPage Schema
How do I make Anime.js animations seekable in HyperFrames?▼

Set autoplay to false when creating the animation, then push the returned instance onto window.__hfAnime. The HyperFrames adapter calls instance.seek(timeMs) on every registered animation so HyperFrames owns the clock.

Anime.js vs GSAP for HyperFrames compositions?▼

GSAP is the primary HyperFrames authoring path and suits complex scene sequencing. Use Anime.js for small SVG or DOM flourishes, compact syntax, or when porting existing Anime.js examples that can be made seek-driven.

Can I use the Anime.js ES module build with HyperFrames?▼

Yes, the adapter does not care how the instance was created. It only requires the returned object to expose seek() and pause(), and preferably play(), so ES module imports from a CDN work fine.

Why does my Anime.js animation not render deterministically in HyperFrames?▼

The usual causes are leaving autoplay enabled, relying on anime.running auto-discovery instead of explicit registration, or using infinite loops. Compute a finite repeat count from the composition duration and push every instance to window.__hfAnime.

How do I validate an Anime.js HyperFrames composition?▼

Run npx hyperframes lint followed by npx hyperframes validate after editing the composition. These commands check that the composition follows the render-safe contract before rendering.

Related Skills

Explore More Software Engineering Skills→
heygen-comheygen-com
40.2k

animejs

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

Official
Intermediate
automatedigitalautomatedigital
1

gsap

Implement GSAP animations for HyperFrames deterministic video rendering pipelines.

Official
Intermediate
automatedigitalautomatedigital
1

animejs

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

Official
Intermediate
heygen-comheygen-com
40.2k

gsap

Create deterministic GSAP timelines and tweens for HyperFrames compositions.

Official
Intermediate