Before building interactivity, you’ll need a few things in place. A state machine needs something to control — and that something starts with your animation.

🎨 Animation

Animations in Lottie Creator are made in Animate Mode. This is where you create the visual behavior of your asset — like a button growing when hovered, or shrinking when clicked.

You’ll use keyframes to define these moments. Each moment (e.g. idle, hover, click) is animated directly on the timeline, just like any other motion workflow.

These “moments” will later become states in your state machine. But first, they live on your timeline as animated sequences.

A simple button animation might include:

• An idle look — no interaction happening.
• A hover animation — maybe it scales up or changes color.
• A click or press — a quick scale-down or press effect.

You can animate these behaviors however you like — all on a single timeline.

✂️ Segments

Segments break your animation into reusable chunks — they’re defined by adding markers in Animate Mode. Each segment will later be connected to a state in your machine.

To define a segment:

• Click the “Segments” button to the left of the Timeline.
• Define the starting and ending frames.
• Give it a clear name (e.g. Idle, Hover, Pressed).

You can create as many segments as you like — just make sure they’re well-labeled. These names are what you’ll see later when choosing which segment a state should play.