How to Create Interactive Animations with the Lottie State Machine: A Beginner's Guide

So you’ve built a beautiful character animation in After Effects. But what if viewers could trigger those animations themselves? What if clicking a button launched the suspicious expression, and tapping another brought the character back to idle?

That’s what the Lottie state machine is for.

This tutorial walks through converting a pre-rendered After Effects animation into an interactive, button-driven experience using Lottie Creator’s state machine. No prior state machine experience is assumed. By the end, you’ll have a working interactive animation and a reusable workflow for any future project.

If you’d prefer to follow along visually, the full video walkthrough is available on our YouTube channel. The complete Lottie project is also posted inside the Lottie community – perfect for remixing or reverse-engineering.

 

Step 1: Start with a Complete After Effects Animation

Before touching Lottie, the animation itself needs to be finished. For this project, the source material is the character facial expressions animation built across our three-part After Effects mini-series. A single continuous sequence where the character cycles through several different expressions.

The animation was placed into a mock app layout with labeled buttons: “Worried,” “Suspicious,” “Surprised,” “Annoyed,” “Evil”, so the interactivity would have a natural container. The full composition runs roughly 10 seconds, playing through every emotional shift as one linear sequence.

This UI design step is a separate skill set. If you’re interested in a dedicated tutorial on building app-style interfaces inside After Effects, leave a comment on the video.

💡 Important design decision: The entire animation – character expressions, UI elements, and all – lives in a single composition. Every button, every emotion shift, every transition is baked into one continuous timeline. This is intentional. The state machine will slice this timeline into segments and make them independently playable.

 

 

Step 2: Choose Your Export Strategy: MP4 vs. the Lottie Plugin

Lottie offers a dedicated After Effects plugin (LottieFiles for After Effects) that exports directly into the Lottie ecosystem. It’s the ideal path when your project is compatible.

However, this particular animation uses effects and expressions that aren’t native to Lottie. For example, here we have:

• A tint effect applied to certain layers
• Custom expressions driving specific properties

Rather than rebuilding the entire animation natively inside Lottie Creator – redoing keyframes, re-layering, re-timing everything – the practical workaround is exporting as a standard MP4 and using Lottie’s video-to-Lottie conversion.

The trade-off: A video-to-Lottie conversion produces a single pre-rendered composition with no editable layers. You can’t tweak individual eye positions or eyebrow paths inside Lottie Creator. But you can still add segments, logic, and interactivity. This is exactly what this tutorial demonstrates.

Export steps:

1. In After Effects, add the composition to the Render Queue (or Adobe Media Encoder).
2. Export as MP4 (H.264) at your desired resolution.
3. Keep the file handy. It’s going straight into Lottie Creator.

💡 Pro tip: If your animation uses only native After Effects properties (position, scale, rotation, opacity, paths, solids, basic shapes), use the Lottie plugin directly. You’ll get editable layers inside Lottie Creator, which means you can add button interactivity natively. No invisible workaround layers needed. The video conversion path is a fallback, not the first choice.

 

 

Step 3: Convert Your Video to a Lottie Asset

Head to app.lottiefiles.com and follow this path:

1. Click “Convert to Lottie” on the dashboard.
2. Select “Video & image to Lottie.”
3. Drag and drop your rendered MP4 file.
4. Wait for the conversion to process.

Once complete, the converted file appears in your asset library. Click the three-dot menu on the asset and select “Open in Lottie Creator.” The animation loads inside the Lottie Creator workspace, playing back just as it did in After Effects.

A quick note: on first load, the playback may appear slightly buggy. This typically resolves after the first full playback cycle as the asset fully caches. If it persists, re-export the MP4 from After Effects at a slightly lower bitrate.

 

 

Step 4: Create Segments. Slicing the Timeline

Segments are the foundation of the state machine. Each segment is a named slice of the timeline that can be triggered independently. Think of them as chapters in a video, except instead of playing in order, they play on demand.

For this project, the timeline breaks down as follows (approximate frame numbers, adjust based on your own animation):

Segment Name	Start Frame	End Frame	What It Shows
Idle	0	36	Character idling, neutral expression
Worried	36	72	Transition to worried expression
Sus (Suspicious)	72	130	Side-eye, tiny pupils
Surprised	130	170	Wide eyes, pupils darting
Annoyed	170	~210	Flattened brows, narrowed lids
Evil	~210	~250	Final antagonistic expression
Normal	~250	End	Returns to idle

How to add segments in Lottie Creator:

1. Locate the segments panel (click the segments icon in the toolbar).
2. Click “Add segment.”
3. Name the segment (e.g., “Idle”).
4. Set the start and end frames. Use the playback head to scrub and find the exact transition points.
5. Repeat for every segment in the sequence.

💡 Pro tip: Name segments exactly as you’ll reference them later in the state machine logic. Consistent naming: “Worried,” “Sus,” “Surprised”, prevents confusion when you’re wiring up interactions. If a segment is called “suspicious” in one place and “sus” in another, the logic breaks.

 

 

Step 5: Add Invisible Buttons (The Workaround Layer)

Here’s the challenge: the animation was imported as a single pre-rendered composition. There are no individual layers for the UI buttons. They’re baked into the video. To make them interactive, invisible clickable shapes need to sit on top of each button area.

Why opacity 1, not 0:

This is the detail that cost two and a half hours of debugging. Setting a shape’s opacity to 0 makes it truly invisible. But it also makes it non-interactive in Lottie Creator’s state machine. The shape disappears from the hit-test area entirely.

The solution: set the opacity to 1, but make the shape visually invisible using a different method. Leave the fill color as something neutral (like the UI background color) or use a fill that blends into the interface. The shape is technically opaque but visually hidden, and crucially, it remains clickable.

Creating the buttons:

1. In Lottie Creator, add a rectangular shape over the first button area (e.g., the “Worried” button).
2. Set its dimensions to cover the button’s clickable area. Don’t leave gaps at the edges.
3. Name the layer descriptively: “Worried Button.”
4. Press Ctrl+D to duplicate, move it over the “Suspicious” button, and rename it to “Sus Button.”
5. Repeat for every interactive button in the UI.

Each invisible shape now acts as a hit target. The state machine will listen for interactions on these layers and trigger the corresponding segment.

💡 Pro tip: Test each button’s hit area before wiring up logic. If a button partially overlaps with its neighbor, clicks in the overlap zone may fire the wrong segment. Leave a small gap between button shapes, or make them slightly smaller than the visible button design.

 

 

Step 6: Wire Up the State Machine Logic

With segments defined and invisible buttons in place, the final step is connecting them through the state machine. This is where the animation transitions from a passive video to an interactive experience.

The core concept: each button click triggers a segment transition.

Basic interaction flow:

1. The animation starts at the Idle segment.
2. Clicking the “Worried Button” shape triggers the Worried segment. The character shifts from idle to worried.
3. When the Worried segment finishes, the character returns to Idle (or stays, depending on the desired behavior).
4. Clicking “Sus Button” triggers Sus, and so on.

Setting up the transitions:

• Open the state machine panel in Lottie Creator.
• Define each segment as a state.
• Add transitions between states, triggered by interactions on the corresponding button layers.
• For a simple sequential flow: idle → (click worried button) → worried → (auto-return after playback) → idle. Repeat for each emotion.

The Lottie community project linked in the video description includes the fully wired state machine. The best way to learn the logic is to open it and study the transitions directly.

What You’ve Built

By the end of this workflow, you have:

• An After Effects animation converted to an interactive Lottie asset via MP4 export.
• A segmented timeline with named states for each emotional expression.
• Invisible clickable button overlays with correct opacity handling.
• A functioning state machine that lets users trigger animations on demand.

The complete interactive project is available on the Lottie community (link in the video description). You can remix it, reverse-engineer the state machine, or drop in your own animations using the same segment-and-button workflow.

This approach – pre-rendered video + Lottie state machine- is a practical bridge for After Effects artists who want interactivity without fully migrating to the Lottie Creator ecosystem. As comfort with Lottie Creator grows, the next step is building animations natively with editable layers, where buttons and interactions live in the same layer stack. No workarounds needed.

To continue exploring character design, animation workflows, and creative tutorials, subscribe to Kashu Universe on YouTube. For free resources, feel free to check out our website, where plenty of helpful materials, guides, and creative tools are available to support and elevate your artistic journey.

Subscribe to our newsletter and never miss free After Effects templates.