Anime.js for HyperFrames

animejs

Contract

• Create animations or timelines synchronously during composition initialization.
• Set

  autoplay: false

  so Anime.js does not advance on its own clock.
• Register every returned animation or timeline on

  window.__hfAnime

  .
• Use finite durations and loop counts.
• Avoid callbacks that mutate DOM based on wall-clock time, network state, or unseeded randomness.

instance.seek(timeMs)

timeMs

Basic Pattern

<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
<script>
  const anim = anime({
    targets: ".mark",
    translateX: 280,
    rotate: "1turn",
    opacity: [0, 1],
    duration: 1200,
    easing: "easeOutExpo",
    autoplay: false,
  });

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(anim);
</script>

Timeline Pattern

<script>
  const tl = anime.timeline({
    autoplay: false,
    easing: "easeOutCubic",
  });

  tl.add({
    targets: ".title",
    translateY: [40, 0],
    opacity: [0, 1],
    duration: 650,
  }).add(
    {
      targets: ".accent",
      scaleX: [0, 1],
      duration: 450,
    },
    250,
  );

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(tl);
</script>

Module Builds

seek()

pause()

play()

<script type="module">
  import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";

  const anim = animate(".chip", {
    x: "18rem",
    duration: 900,
    autoplay: false,
  });

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(anim);
</script>

Good Uses

• Small SVG and DOM flourishes where Anime.js syntax is compact.
• Imported Anime.js examples that can be made seek-driven.
• Multiple independent micro-animations pushed into the same registry.

Avoid

• Leaving

  autoplay

  at the Anime.js default.
• Depending on

  anime.running

  auto-discovery instead of explicit

  window.__hfAnime.push(...)

  .
• Infinite loops. Compute a finite repeat count from the composition duration.
• Building animations in timers, promises, event handlers, or after async asset loads.

Validation

npx hyperframes lint
npx hyperframes validate

Credits And References

• HyperFrames adapter source:

  packages/core/src/runtime/adapters/animejs.ts

  .
• Anime.js documentation for

  autoplay

  ,

  pause()

  , and

  seek()

  : https://animejs.com/documentation/