skills.rest
hoanghd218
hoanghd218COMMUNITY
Explore all skills by this author →
GitHub

waapi

Align WAAPI animation timelines with HyperFrames timing for deterministic playback.

7|9|Updated May 9, 2026
Search Tags:#frontend#deterministic#web-animations#waapi#animation-timing#hyperframes
One-click install
npx skills add https://github.com/hoanghd218/claude-code-2-days --skill waapi-hoanghd218
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: waapi
Source: https://github.com/hoanghd218/claude-code-2-days/tree/main/.agents/skills/waapi
Command: npx skills add https://github.com/hoanghd218/claude-code-2-days --skill waapi-hoanghd218

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

WAAPI integration with HyperFrames enables deterministic playback of Web Animations API sequences by mapping timing and keyframes to HyperFrames time.

Core Features & Use Cases

  • Web Animations API adapter patterns for HyperFrames to drive element.animate() motions with deterministic rendering.
  • Use when authoring motion, seeking currentTime, reading document.getAnimations(), or timing KeyframeEffect with fill modes in HyperFrames contexts.
  • Use case: ensure smooth, repeatable animations across devices and time-slices.

Quick Start

Create a WAAPI animation on a DOM element using element.animate(...) with a finite duration and pause it so HyperFrames controls playback.

Frequently Asked Questions about waapi

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

FAQPage Schema
How do I ensure deterministic playback for Web Animations API in HyperFrames?▼

Deterministic Web Animations API playback in HyperFrames is achieved by aligning WAAPI timelines with HyperFrames timing. This enforces synchronous animation creation, finite durations, and pause-on-seek behavior for repeatable rendering.

What is the best way to handle KeyframeEffect fill modes for HyperFrames animations?▼

The best way to handle KeyframeEffect fill modes for HyperFrames animations is to enforce a 'fill: both' policy. This ensures elements retain their animated state correctly across HyperFrames time-slices and seeking operations.

Can I use document.getAnimations() when authoring WAAPI motions for HyperFrames?▼

Yes, you can use document.getAnimations() when authoring WAAPI motions for HyperFrames. The integration supports reading active animations while avoiding render-critical callbacks or promises to maintain deterministic timing.

Why does my element.animate() motion skip frames during HyperFrames seeking?▼

Your element.animate() motion skips frames because it lacks pause-on-seek behavior and finite iterations. Enforcing synchronous animation creation and aligning the WAAPI timeline with HyperFrames timing resolves this rendering desync.

Do I need finite durations for WAAPI animations in a HyperFrames context?▼

Yes, you need finite durations and finite iterations for WAAPI animations in a HyperFrames context. Enforcing finite timing ensures the animation sequence maps deterministically to HyperFrames time-slices.

Related Skills

Explore More Software Engineering Skills→
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
wesleysimpliciowesleysimplicio
1

waapi

Coordinate WAAPI animations with HyperFrames time via currentTime seeking.

Community
Intermediate
KamalabotKamalabot

waapi

Create native WAAPI animations with deterministic timing within HyperFrames.

Community
Intermediate
automatedigitalautomatedigital
1

waapi

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

Official
Intermediate