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.

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
Trusted by 15 million+ designers and developers from over 280,000 companies worldwide

Animation logic, visually mapped with nodes

Animation logic, visually mapped with nodes

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

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

Prompt to State Machines

New

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

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

Watch video

Explore a new world of interactive animations

Explore a new world of interactive animations

Toggle

Smart watch

Dashboard

Switch the toggle

Switch the toggle

Remix these
interactive animations

Pick an animation to explore and make it your own.

Pack it into one lightweight dotLottie file

Pack it into one lightweight dotLottie file

Faster performance

Reduce load times with compressed, optimized files.

Reduce load times with compressed, optimized files.

Built-in supports

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

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

Cross-platform consistency

Play reliably across platforms with dotLottie runtimes.

Play reliably across platforms with dotLottie runtimes.

Seamless designer to developer workflow

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.

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

Javascript
Javascript
Javascript
React
React
React
VueJS
VueJS
VueJS
Basic HTML
Basic HTML
Basic HTML
Svelte
Svelte
Svelte
Apple iOS
Apple iOS
Apple iOS
Android
Android
Android

dotLottie Spec on State Machines

dotLottie Spec on State Machines

Integrate with your no-code website builder

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

Watch more

Design teams love LottieFiles

"It's rare to find a solution that enhances both user experience and developer productivity. With dotLottie, we've achieved both, and we're excited to keep exploring its potential!"

Akanshi

Sr. Software Engineer at Gojek

"By leveraging Lottie animations, we can provide a dynamic experience and make it much more fun by showcasing an animation that is much richer and engaging."

Disney Now Team

"Integrating Lottie animation allowed the website to be more captivating, resulting in an average time spent on site of two and a half minutes across 30,000 unique visitors."

Design team at CNN Create

"This wouldn't be as effortless with another format; I've come to depend on the quality and control Lottie affords. Knowing I have this capability allows me to deepen otherwise static graphics into moments of joy and mindful engagement."

Brian Lee

Lead Animator

"Lottie's JSON-based format allowed us to bring complex animations to life without compromising performance, which was especially beneficial in our mobile applications"

Jayant Mandan

Interaction Designer

"With Lottie, we no longer have to make these thousands of different versions of one animation; just one solution for web, mobile, iOS, and Android."

Design team at Instacart

"It's rare to find a solution that enhances both user experience and developer productivity. With dotLottie, we've achieved both, and we're excited to keep exploring its potential!"

Akanshi

Sr. Software Engineer at Gojek

"By leveraging Lottie animations, we can provide a dynamic experience and make it much more fun by showcasing an animation that is much richer and engaging."

Disney Now Team

"Integrating Lottie animation allowed the website to be more captivating, resulting in an average time spent on site of two and a half minutes across 30,000 unique visitors."

Design team at CNN Create

"This wouldn't be as effortless with another format; I've come to depend on the quality and control Lottie affords. Knowing I have this capability allows me to deepen otherwise static graphics into moments of joy and mindful engagement."

Brian Lee

Lead Animator

"Lottie's JSON-based format allowed us to bring complex animations to life without compromising performance, which was especially beneficial in our mobile applications"

Jayant Mandan

Interaction Designer

"With Lottie, we no longer have to make these thousands of different versions of one animation; just one solution for web, mobile, iOS, and Android."

Design team at Instacart

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.

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.

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

Create interactive animations with State Machines

Explore Lottie Creator

Explore Lottie Creator

Explore Lottie Creator