waapi

Coordinate WAAPI animations with HyperFrames time via currentTime seeking.

1|Updated May 7, 2026

Search Tags:#animation #deterministic #keyframes #waapi #hyperframes #web-animations-api #currentTime

Ready to run

npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill waapi-wesleysimplicio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: waapi
Source: https://github.com/wesleysimplicio/simplicio-mapper/tree/main/.skills/waapi
Command: npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill waapi-wesleysimplicio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

WAAPI integration enables deterministic playback of Web Animations API-driven motion inside HyperFrames, bridging native browser animations with HyperFrames timing.

Core Features & Use Cases

WAAPI integration patterns for deterministic rendering in HyperFrames.
Basic Pattern: create and pause animations to align with HyperFrames timeline.
Stagger Pattern: staggered starts for coordinated motion across elements.

Quick Start

Instantiate a WAAPI animation on an element with a finite duration and then pause it so HyperFrames can deterministically drive the currentTime.

Frequently Asked Questions about waapi

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

FAQPage Schema

How do I control Web Animations API playback inside HyperFrames deterministically?▼

Deterministic WAAPI playback in HyperFrames is achieved by creating finite duration element.animate animations synchronously, pausing them immediately, and updating each animation's currentTime to match the HyperFrames timeline.

Why do my Web Animations API animations drift out of sync with HyperFrames?▼

WAAPI animations drift when not explicitly paused after creation. To prevent desync, apply fill: 'both', pause the animation on initialization or first seek, and drive currentTime directly from HyperFrames time.

Can I use element.animate with iterations for deterministic rendering in HyperFrames?▼

Yes, element.animate supports finite duration and iterations for deterministic rendering in HyperFrames. Create animations synchronously during initialization, apply fill: 'both', pause them, and update currentTime to HyperFrames time.

What is the best way to stagger Web Animations API animations across multiple elements in HyperFrames?▼

The stagger pattern coordinates WAAPI motion across elements by applying staggered start times. Create and pause each element.animate instance synchronously, then update their currentTime values to HyperFrames time for deterministic playback.

Does the Web Animations API work with HyperFrames for precise currentTime seeking?▼

WAAPI works with HyperFrames for precise currentTime seeking by pausing animations after creation and synchronizing each animation's currentTime to the HyperFrames timeline, ensuring deterministic frame-by-frame motion control.

What are the limitations of using WAAPI for deterministic animation in HyperFrames?▼

WAAPI deterministic playback in HyperFrames requires finite duration animations with fill: 'both'. Animations must be paused after creation or on first seek, and currentTime is manually updated, limiting use to finite, controllable motion patterns.