waapilisted

# 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 finite `duration` and `iterations`. - 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 ```html <div id="orb" class="clip orb" data-start="2" data-duration="3" data-track-index="2"></div> <script> const orb = document.getElementById("orb"); const animation = orb.animate( [ { transform: "translate3d(-160px, 0, 0) scale(0.8)", opacity: 0 }, { transform: "translate3d(0, 0, 0) scale(1)", opacity: 1, offset: 0.35 }, { transform: "translate3d(120px, 0, 0) scale(1.08)", opacity: 1 }, ], { duration: 3000, delay: 2000, easing: "cubic-bezier(0.2, 0, 0, 1)", fill: "both", iterations: 1, }, ); animation.pause(); </script> ``` ## Stagger Pattern ```js document.querySelectorAll(".token").forEach((token, index) => { const animation = token.animate( [ { transform: "translateY(2