Interactivity & State Machines
Build interactive animations without code by using dotLottie state machines in Lottie Creator.
User Interface
State Machines Mode can be accessed with a toggle near the top right of the screen. It contains a number of tools for creating and testing state machines.
Inputs and Interactions can be created and managed in the right side panel.
States can be created and managed in the bottom left side panel. Drag and drop to create a state.
The Canvas is where state machines can be modeled visually.
The Floating Panel can be used to play the state machine. It is also where Prompt to Sttate Machines, our state machine-creating AI, can be accessed.
How state machines work
- •States: Named playback configurations (timeline segments, speed, direction).
- •Inputs: Variables that store values (Boolean, Numeric, String, Event).
- •Transitions: Rules that move between states, optionally with guards and tweening.
- •Interactions: User events (click, hover) that trigger actions.
- •Actions: Operations that change inputs, control playback, or fire events.
State machines let you design hover effects, clickable UI, data-driven visuals, and multi-step flows directly in the editor.
Related articles
Applies to: Lottie Creator (Web), dotLottie state machines