waapi

Synchronize Web Animations API animations with HyperFrames timing via currentTime seeking.

118|12|Updated May 5, 2026

Search Tags:#animation #deterministic #waapi #web animations #hyperframes #currentTime

Ready to run

npx skills add https://github.com/alecs5am/ralphy --skill waapi-alecs5am

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: waapi
Source: https://github.com/alecs5am/ralphy/tree/main/.agents/skills/waapi
Command: npx skills add https://github.com/alecs5am/ralphy --skill waapi-alecs5am

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web Animations API animations often rely on browser timing that can drift when nested in complex pipelines. This skill provides a deterministic adapter layer so WAAPI-generated animations align with HyperFrames' timing and rendering cadence.

Core Features & Use Cases

Synchronize element.animate animations with HyperFrames time by mapping currentTime and pausing after creation.
Enable predictable motion sequences (start, delay, duration, and fill) without GSAP dependencies.
Use in scenarios requiring offline determinism, frame-accurate playback, and reproducible renders for testing.

Quick Start

Create a WAAPI animation on an element and pause it to align with HyperFrames timing during initialization.

Frequently Asked Questions about waapi

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

FAQPage Schema

How do I make Web Animations API deterministic for frame-accurate playback?▼

To make Web Animations API deterministic, create animations synchronously at initialization, pause them immediately, and drive playback by mapping currentTime to your engine's timing via document.getAnimations().

How do I sync element.animate sequences with HyperFrames timing without GSAP?▼

You can sync element.animate sequences with HyperFrames by pausing WAAPI animations after creation and mapping currentTime to HyperFrames rendering cadence, eliminating GSAP dependencies for predictable motion sequences.

Why does my WAAPI animation drift when nested in a complex rendering pipeline?▼

WAAPI animations drift because they rely on browser timing that can desync in complex pipelines; using a deterministic adapter layer aligns WAAPI playback with HyperFrames' timing and rendering cadence.

When do I need to use currentTime seeking for Web Animations API?▼

You need currentTime seeking for Web Animations API when requiring offline determinism, frame-accurate playback, and reproducible renders for testing, ensuring predictable start, delay, duration, and fill sequences.

Can I use document.getAnimations to control WAAPI playback in HyperFrames?▼

Yes, you can use document.getAnimations() to control WAAPI playback in HyperFrames by querying paused animations and driving their currentTime based on HyperFrames timing for deterministic, frame-accurate rendering.