# dotLottie State Machines Tutorial: How to Bring Your Animations From Idle to Action

*By LottieFiles · October 10, 2025*

Explore dynamic transitions based on user input and triggers.

---

Animations no longer need to be static or linear. With [State Machines](https://lottiefiles.com/state-machines), you can create dynamic, interactive motion that responds directly to user input. Instead of a simple start-to-end play-through, your animations can adapt based on conditions; whether it’s a click, a toggle, or the completion of another animation.

In this tutorial, we’ll guide you step by step through building a boolean example of a check-in animation in [Lottie Creator](https://lottiefiles.com/creator); showing you how to define states, set transitions, and bring interactivity to life.

## **Step-by-step: Creating an interactive check-in animation**

This is the animation we will be working on in [Lottie Creator](https://lottiefiles.com/creator). We've also included the remix link at the end of this tutorial.

[Embedded content](https://lottie.host/embed/b6bc838a-ab03-4f2a-8eb2-5333b1970960/Ua3H41YJ2j.lottie?stateMachineId=StateMachine1)

### **Step 1:**

Add segments to your animation.

![](https://blog-cdn.lottiefiles.com/2025/10/1--7-.png)

### **Step 2:**

Click on the **State Machines tab** on the top right corner of Lottie Creator.

![](https://blog-cdn.lottiefiles.com/2025/10/2--7-.png)

### **Step 3:**

Bring both the **segments (Idle and On Click)** in the State Machines area.

![](https://blog-cdn.lottiefiles.com/2025/10/3--8-.png)

### **Step 4:**

Click on **Idle state** for more options. Select **infinite loop** and **change Mode to bounce.**

![](https://blog-cdn.lottiefiles.com/2025/10/4--5-.png)

### **Step 5:**

Add a **Boolean input** and **name it ChangeDate**, or you can name it anything you want.

![](https://blog-cdn.lottiefiles.com/2025/10/5--5-.png)

### **Step 6:**

Add a **click interaction** and keep the button (Check in today) layer as target layer. Select **Toggle Boolean as Action option** and select the input you have just added (ChangeDate).

![](https://blog-cdn.lottiefiles.com/2025/10/6--3-.png)

### **Step 7:**

Now, connect the **Idle state** to the **On Click state**. Open the **Configure Transition box** and add a condition. Select **the ChangeDate input** that you added before and change the **value as true**.

![](https://blog-cdn.lottiefiles.com/2025/10/7--1-.png)

### **Step 8:**

Select the **On Click state** for more options. Click on the plus icon beside the “On completion actions” Label, and select **Toggle Boolean**. **Select ChangeDate** as the input.

![](https://blog-cdn.lottiefiles.com/2025/10/8--3-.png)

### **Step 9:**

Connect **On Click state** back to the **Idle state** so that the animation goes back to Idle state once On Click state is done animating.

![](https://blog-cdn.lottiefiles.com/2025/10/9.png)

### **Step 10:**

Now, you can play the State Machine and click on the “Check in today” button to play the On Click segment at any moment.

![](https://blog-cdn.lottiefiles.com/2025/10/10.gif)

We’ve included the remix link below so you can open this animation directly in Lottie Creator, experiment with the boolean setup, and customize it for your own projects.

Remix This Check-in Lottie

## **Implementing in a Web App (For Developers)**

Let’s get started using our state machines in a React web application!  
  
Start by installing the package:  
  
\`\`\`

Pnpm add @lottiefiles/dotlottie-react\`\`\`  
  
Then in our app.tsx file:

```swift
import { DotLottieReact, DotLottie } from '@lottiefiles/dotlottie-react';

Function App() {
	Return (
<div>
	<DotLottieReact
       src=’animation url’
	stateMachineId=’check-in’
     />


</div>
)
}
```

Since we configured Interactions, the player takes care of setting up user interactions for us!

## **Where can you use this?**

dotLottie State Machines is a powerful tool for interactive UI elements and gamification. Here are two use cases:

-   **Interactive app features:** You can integrate State Machines into apps for engagement. For example, using an animation like this to visualize a service ranking system, where clicking changes the state dynamically.
-   **Game mechanics:** State Machines can be used in game logic, such as triggering character animations.

## **Explore dotLottie State Machines for animations**

dotLottie State Machines are incredibly powerful because they allow you to create responsive, non-linear animations that adapt to user interactions and conditions.

Instead of relying on a simple start-to-end animation sequence, you can build a dynamic system where animations trigger based on events like clicks, hovers, or completion of other animations. This makes them perfect for interactive UI components, game mechanics, and real-time user feedback systems.

By structuring animations with states and transitions, you gain greater flexibility, scalability, and reusability, making your animations more efficient and engaging.

Explore dotLottie State Machines

---

## Related Articles

- [How to Create Animations with AI Using Lottie Creator WebMCP](/blog/working-with-lottie-animations/how-to-create-animations-with-ai-using-lottie-creator-webmcp)
- [How to Build Your First Lottie Creator Plugin: Create and Animate a Rectangle](/blog/working-with-lottie-animations/how-to-build-lottie-creator-plugin-create-and-animate-a-rectangle)
- [How to Develop and Publish a Plugin for Lottie Creator](/blog/working-with-lottie-animations/how-to-develop-and-publish-a-plugin-for-lottie-creator)
- [How to Publish a Lottie Creator Plugin to Extensions](/blog/working-with-lottie-animations/how-to-publish-a-lottie-creator-plugin-to-extensions)