skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

waapi

Implements Web Animations API patterns for deterministic seeking in HyperFrames compositions.

Updated Mar 4, 2026
Search Tags:#keyframes#waapi#video composition#hyperframes#element.animate#animation seeking#web animations api
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill waapi-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: waapi
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/waapi
Command: npx skills add https://github.com/gmolike/Claude-Template --skill waapi-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Native Web Animations API animations run on their own browser clocks, which breaks frame-accurate rendering when HyperFrames needs to seek animations to exact timestamps. This Skill provides the patterns and constraints for authoring WAAPI animations that HyperFrames can deterministically control via currentTime seeking. ## Core Features & Use Cases - Seekable Animation Patterns: Create element.animate() animations with finite durations, fill: "both", and paused states so HyperFrames can set currentTime precisely. - Stagger and Keyframe Recipes: Ready-to-use patterns for staggered token animations and multi-offset keyframes with cubic-bezier easing. - Constraint Guidance: Clear rules on what to avoid, such as infinite iterations, animation.finished callbacks, requestAnimationFrame clocks, and layout property animation. - Use Case: You are building a HyperFrames video composition where an orb element must slide in, scale up, and settle at exact timeline positions. Use this Skill to write the WAAPI keyframes with proper delay and fill settings, then validate with npx hyperframes lint and validate. ## Quick Start Ask the AI to create a HyperFrames-compatible Web Animations API animation for an element that fades in and slides across the screen between seconds 2 and 5 of the composition.

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 animations seekable in HyperFrames?▼

Create animations synchronously with element.animate() using finite duration and iterations, set fill to "both", and call animation.pause() after creation. The HyperFrames waapi adapter then sets each animation's currentTime to the composition time in milliseconds.

When should I use WAAPI instead of GSAP for animations?▼

Use the Web Animations API for lightweight DOM motion, animations generated from structured data, and simple keyframe timelines where a GSAP dependency is unnecessary. WAAPI gives native browser keyframes with JavaScript-controlled timing.

Can I use infinite iterations with element.animate in HyperFrames?▼

No. Infinite iterations break deterministic seeking because the adapter sets currentTime to a finite composition time. Always use finite duration and iterations values so seeked states resolve predictably.

Why is my WAAPI animation not rendering at the correct time in HyperFrames?▼

The waapi adapter seeks document-level animation time, not clip-local time. Model clip offsets with the delay option, and avoid relying on animation.finished, requestAnimationFrame, timers, or performance.now() for render-critical state.

How do I validate a WAAPI composition in HyperFrames?▼

Run npx hyperframes lint followed by npx hyperframes validate after editing the composition. These commands check that the animation setup conforms to HyperFrames rendering requirements.

Related Skills

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

css-animations

Seek CSS animations deterministically via the css adapter in HyperFrames.

Official
Intermediate
heygen-comheygen-com
40.2k

hyperframes-cli

Scaffold, lint, preview, and render HTML-based HyperFrames compositions.

Official
Intermediate
Marshal-NguyenMarshal-Nguyen
1

hyperframes-keyframes

Author seek-safe 2D and 3D keyframes for HyperFrames compositions and verify them with CLI diagnostics.

Community
Advanced
greensockgreensock
13.3k

gsap-timeline

Coordinate complex animations using the GSAP timeline API.

Official
Advanced