waapi

Original：🇺🇸 English
Translated

Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.

69.8kinstalls
Sourceheygen-com/hyperframes
Added on

NPX Install

npx skill4agent add heygen-com/hyperframes waapi

Tags

Translated version includes tags in frontmatter
waapihyperframesweb-animations-apifrontend-animationdom-animation

SKILL.md Content

View Translation Comparison →

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(24px)", opacity: 0 },
      { transform: "translateY(0)", opacity: 1 },
    ],
    {
      duration: 620,
      delay: index * 80,
      easing: "cubic-bezier(0.2, 0, 0, 1)",
      fill: "both",
      iterations: 1,
    },
  );
  animation.pause();
});

Good Uses

  • Lightweight DOM motion where CSS keyframes are too rigid and GSAP is unnecessary.
  • Generated animations from structured data.
  • Simple timelines that can be represented as keyframes, delays, and offsets.

Avoid

  • Infinite 
    iterations
    .
  • Depending on 
    animation.finished
    to mutate render-critical DOM.
  • Running separate clocks with 
    requestAnimationFrame
    , timers, or 
    performance.now()
    .
  • Animating layout properties when transforms and opacity can express the motion.
  • Assuming clip-local start time is automatic. WAAPI adapter seeks document-level animation time; model clip offsets with 
    delay
    or create the animation on an element whose visibility is controlled by HyperFrames timing.

Validation

After editing a WAAPI composition:
bash
npx hyperframes lint
npx hyperframes validate

Credits And References