animejslisted

# Anime.js for HyperFrames HyperFrames can seek Anime.js instances through its `animejs` runtime adapter. The composition owns the animation objects; HyperFrames owns the clock. ## 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. The adapter seeks every registered instance with `instance.seek(timeMs)`, where `timeMs` is HyperFrames time in milliseconds. ## Basic Pattern ```html <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 ```html <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> ```