waapi
Installation
Summary
Native browser keyframe animations with deterministic seeking for HyperFrames compositions.
- Create animations synchronously with
element.animate()using finite durations and iterations, then pause them for adapter control - The adapter seeks all active animations via
document.getAnimations()by settingcurrentTimeto HyperFrames timeline position in milliseconds - Use
fill: "both"to persist seeked states, and model clip timing withdelayor visibility control rather than relying on clip-local start times - Supports staggered animations, keyframe offsets, and easing functions; avoid infinite iterations,
animation.finishedcallbacks, and layout property animation
SKILL.md
Web Animations API for HyperFrames
HyperFrames can seek Web Animations API animations through its waapi runtime adapter. WAAPI is useful when you want native browser keyframes with JavaScript-created timing and no GSAP dependency.
Contract
- Create animations synchronously during composition initialization.
- Use
element.animate(...)with finitedurationanditerations. - Use
fill: "both"so seeked states persist. - Pause animations after creation or let the adapter pause them on first seek.
- Avoid callbacks and promises for render-critical state.
The adapter calls document.getAnimations(), sets each animation's currentTime to HyperFrames time in milliseconds, then pauses it.
Basic Pattern
<div id="orb" class="clip orb" data-start="2" data-duration="3" data-track-index="2"></div>