AXO Docs

A number from the page: a gauge ​

The needle shows whatever number the page has (a speed, a score, a battery level) and moves to a new one whenever the page says so. Drag the slider under the player. The sample comp is Speed gauge (folder Interactive examples).

Loading the player…
Live · dotlottie-webDownload .lottie

How it works ​

The needle's Rotation is a slot, needle: −120° is zero, 120° is the top of the scale. The page sets it with setScalarSlot, as often as it likes; nothing in the file decides where the needle is. The rest of the file plays on its own: the hub glows in a slow loop.

That loop is not decoration only: a slot shows on the next frame the player draws. While the file plays, that is at once; a paused file keeps the old picture until something calls setFrame.

Why not an expression

dotLottie defines an action that writes a variable into an expression (Set expression), but the player these pages use (dotlottie-web 0.81, measured in 0.80 with the same engine) refuses any state machine that contains it, and the file then does nothing at all. AXO does not offer it for that reason. A slot does the same job and works in every dotLottie player.

In After Effects ​

  1. Leave the needle's Rotation without keyframes (a slot on an animated property holds it still), at the zero position.
  2. Interactive Studio → Slots and themes → Add a token: pick Needle › Rotation, name it needle.
  3. Animate everything else as usual. Build as .lottie.

On a web page ​

js
// the version these pages use
import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/+esm";

const gauge = new DotLottie({ canvas: document.querySelector("#gauge"), src: "speed-gauge.lottie", autoplay: true, loop: true });

/** value 0..100 -> needle -120..120 degrees */
function show(value) {
  const v = Math.min(100, Math.max(0, value));
  gauge.setScalarSlot("needle", -120 + (v / 100) * 240);
}
gauge.addEventListener("load", () => show(0));
// e.g. every second from your data:
// setInterval(async () => show(await readSpeed()), 1000);

To move the needle smoothly rather than jump, animate the number in the page (requestAnimationFrame) and set the slot on every frame.

Variations ​

  • A battery or a download with a fill: a Scale slot on the fill instead of a Rotation.
  • A temperature dial that also changes colour: a Rotation slot and a Colour slot set together.
  • A score: an Opacity slot per digit layer is enough for 0–9 without text.

AXO for After Effects