Interactivity: the overview
An interactive animation reacts to a click, the pointer, a timer or your page. AXO builds it in After Effects and writes it as a dotLottie v2 file (.lottie). This page says what is in such a file, what plays it, and where to start.
What a .lottie v2 carries
A .lottie is a zip: the animation (one or several), its images, and three things a plain Lottie JSON cannot carry.
| What it is | Made from | Read more | |
|---|---|---|---|
| Segments | Named stretches of the timeline: idle, hover, like. | Your comp's markers, name and duration. | Interactive Studio → Segments |
| Slots (tokens) | Properties the file exposes so they can be changed: a colour, an opacity, a position, a scale, a text. | Properties you add to Essential Graphics. | Slots and themes |
| Themes | Named sets of slot values: Day, Night, Brand. | Columns in the Studio's Slots and themes tab. | Slots and themes |
| State machines | What plays when: states, rules, inputs, clicks. | The Studio's machine editor, or a template. | State machines, step by step |
The three work together: a state plays a segment, a rule or a click can switch a theme, and a theme changes slots. Your page talks to all of it through the player.
One playhead. Whatever a file shows, it shows one frame of the whole animation at a time. Every page on interactivity comes back to this, because it decides how the animation has to be cut into segments. The music player is the long example.
What plays it
| Player | State machines | Themes | Slots | How we know |
|---|---|---|---|---|
| dotlottie-web 0.81 (the player a web page uses; also AXO's Preview and Test player) | yes | yes | yes, and from code (setSlots, setColorSlot…) | Measured: every example in these docs is played in it (measured in 0.80; 0.81 ships the same player engine byte for byte, checked 2026-10-14) |
| dotlottie-react, -vue, -wc (web components) | yes | yes | yes | Each wraps dotlottie-web 0.81.0 (their packages, checked 2026-10-14) |
| dotLottie for Android, iOS | yes | yes | — | Their documentation (built on the same core, dotlottie-rs); not measured here |
| lottie-web 5.13 | no | no | the file's own slot values only | Measured: it draws the values the file carries; no theme switching, no machine |
| A plain Lottie JSON in any player | no | no | — | A JSON has nowhere to put themes or machines |
Pin the version you tested: the snippets in these docs load @lottiefiles/dotlottie-web@0.81.0.
Where to start
Every example animation, playing, on one page: All example animations.
- Toggle with two segments: the first interactive tutorial, from opening the Studio to the web page, on a toggle switch.
- The templates: one page per kind of behaviour (hover, click, press, sequence, carousel…), each with its own example, and a decision tree to pick the right one.
- State machines, step by step: the editor in detail. States, rules, inputs and interactions; how the player really behaves; every warning the Studio can show; touch and accessibility; and what a machine cannot do.
- The two bigger examples: a music player (21 states, routing, themes from the machine) and a thermostat (press and hold, timers, a dial driven by an input).
- Every building block: each trigger, condition and action, with where it is used.
- Slots and themes: from Essential Graphics to a theme a machine switches.
- Several animations in one file: one machine for an archive, a theme per animation, and what changes when a state switches the animation.