LottieFiles

Interactive motion design with State Machines

Create interactive animations without code. Set transitions, states and triggers, and then export a single dotLottie for web and mobile.

Watch video

Trusted by 15 million+ designers and developers from over 280,000 companies worldwide

Animation logic, visually mapped with nodes

Connect animation states and create transitions that react to users' inputs, data or events

States

Break your animation into specific segments that you can connect together and control.

Transitions

Link states together and set conditions for smooth, dynamic movement between them.

Inputs

Add numeric, string, boolean, or event inputs to trigger behaviors and make animations smarter.

Interactions

Detect user actions like clicks, hovers, or data and fire responsive state changes right away.

Actions

Automatically execute operations when states change or user interactions occur.

Prompt to State Machines

New

Describe your interaction, and our AI builds the logic, states, and transitions.

Watch video

Explore a new world of interactive animations

Toggle

Smart watch

Dashboard

Switch the toggle

Remix these
interactive animations

Pick an animation to explore and make it your own.

Pack it into one lightweight dotLottie file

Faster performance

Reduce load times with compressed, optimized files.

Built-in supports

Store state machines, themes, and markers right inside one file.

Cross-platform consistency

Play reliably across platforms with dotLottie runtimes.

Seamless designer to developer workflow

Create states and transitions in the editor, then hand off a dotLottie file that slots straight into your stack. One format. No guesswork.

Javascript
React
VueJS
Basic HTML
Svelte
Apple iOS
Android

dotLottie Spec on State Machines

Integrate with your no-code website builder

Add interactive Lottie animations directly to Webflow or Framer using the LottieFiles plugin.

Install the Framer plugin

Install the Webflow plugin

Watch how State Machines work

Watch more

Design teams love LottieFiles

Frequently asked questions

What are dotLottie State Machines?

dotLottie State Machines are a powerful feature that allows designers to build interactive animations that respond to user inputs, data, or specific triggers without writing any code. Visually map out how an animation behaves and transitions between different states—like hover effects, button clicks, or loading indicators using node-based animations.

How do state machines make animations interactive?
How do state machines compare with traditional coded animations?
Is there a limit to the number of states or transitions I can have in a state machine?
How do I integrate dotLottie State Machines into my web or iOS and Andriod application?

Create interactive animations with State Machines

Explore Lottie Creator