A State Machine is like a traffic controller for your animations: it decides what happens next based on user input or conditions. Let’s build one together, step by step, using a button hover + click as our running example.

https://lottie.host/embed/75b15a99-b46b-4434-9faa-e0c862f09263/7TKhIJ9daB.lottie?stateMachineId=StateMachine1

You can remix the file for this example here:

https://creator.lottiefiles.com/?remixId=e5eea764-af56-4a6d-8f7b-0bc9ef9ee376&utm_source=&utm_medium=creator

🎨 Step 1: Prepare Your Animation

Before we even touch State Machines, we need an animation to work with.

1. Draw the button.
2. Add keyframes for the different interactions:
   • One area for hovering.
   • Another for pressing/clicking.
3. Add segments that cover those keyframe areas.
   • Hit ▶️ Play to preview what happens in each segment.
   • Rename them something clear, like Idle, Hover, and Click.

In our example, Idle covers frames 0-90, Hover covers 90-179, and Click covers 180-299.

👉 At this point, you should have a button with labeled segments that look like mini “clips” of behavior.

For more information on Animations and Segments: Animations and Segments

🟢 Step 2: Add States

1. Open the State Machines tab.

1. At the bottom-left, you’ll see your named segments.