Setting the file. One moment.
Skill 18 · Hyperframes Animation
Subchapter 18.16
adapters/lottie.mdMarkdown6 KBView on GitHub
HyperFrames can seek both lottie-web and dotLottie players through its lottie runtime adapter. Lottie is a strong fit because the animation timeline is already encoded in the asset; HyperFrames only needs a player object it can seek.
assets/.autoplay: false.loop: false for a one-shot and loop: true for a cycle (walk, idle, spinner). A looping animation is seeked to composition time modulo its own length, so it keeps cycling for the whole scene; a one-shot holds its last frame. Always set loop: lottie-web treats a missing loop as true. A numeric loop count does not repeat under seeking; bake the repeats into the file.window.__hfLottie.The adapter seeks lottie-web with goToAndStop(timeMs, false) and dotLottie with frame or percentage APIs depending on player shape.
<div id="logo-lottie" class="lottie-layer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
const anim = lottie.loadAnimation({
container: document.getElementById("logo-lottie"),
renderer: "svg",
loop: false,
autoplay: false,
path: "assets/logo-reveal.json",
});
window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(anim);
</script>.lottie-layer {
width: 100%;
height: 100%;
}<canvas id="product-lottie" class="lottie-canvas"></canvas>
<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
<script>
const player = new DotLottie({
canvas: document.getElementById("product-lottie"),
src: "assets/product-flow.lottie",
autoplay: false,
loop: false,
});
window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(player);
</script>.lottie-canvas {
width: 100%;
height: 100%;
display: block;
}Push each player into the same registry:
window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(backgroundAnim);
window.__hfLottie.push(iconAnim);
window.__hfLottie.push(confettiAnim);HyperFrames seeks them all to the same composition time.
The render engine needs the composition’s total length. GSAP timelines report duration automatically; a Lottie-only composition has no timeline object, so the runtime reads the registered animation’s native length directly — totalFrames / frameRate for lottie-web, or the player’s own duration for dotLottie. data-duration on the root element is optional for Lottie compositions: as long as every animation is registered on window.__hfLottie (per the contract above), the runtime has a finite duration to work with. With loop: true that length is one cycle, so a looping Lottie in a longer scene needs data-duration or a GSAP timeline to set the scene length.
For a character that walks, gestures or reacts (a mascot, a walk cycle, a jointed puppet), put the acting in one Lottie and the stage in GSAP:
markers array (tm is in frames, divide by fr) or from the animator’s notes.loop: true cycles for the whole scene. Move the character across the stage with GSAP x only if the cycle walks in place, and match the travel speed to the stride or the feet slide.The lottie-character-walk registry block is a working example: a jointed flat character walks in on planted feet, stops, and points at a card that GSAP brings in on the point (npx hyperframes add lottie-character-walk).
path URLs at render time.play()..lottie file in a browser first.After editing a Lottie composition:
npx hyperframes lint
npx hyperframes checkpackages/core/src/runtime/adapters/lottie.ts.packages/core/src/runtime/init.ts (resolveAdapterDurationFloorSeconds), getInferredDurationSeconds in the adapter above.loadAnimation options: https://github.com/airbnb/lottie-web/wiki/loadAnimation-options (opens in a new tab)