Start delay, speed from 0 to 8×, Once, Loop or Ping-pong, hold the last frame or go back to the first, and play a range between two of its markers.
MOTION THAT
REACTS!
Hover it and it grows. Click it and it bursts. Hold RUN and the hero runs. State machines, motion components and Lottie that answer people, built on the timeline you already know.
The Like button Lottie template in Animate. The State machine button in the transport bar swaps the timeline for the machine’s graph: Idle, Hover, Like and Unlike joined by transitions, with the hovered and liked inputs and the listeners beside it. Picking the Like state shows what it plays. In present mode the pointer moves onto the heart and it grows; a click fills it with a burst, and a second click empties it.
BOING!
THE IDEA
Animation is better when it answers back
A video plays the same way every time. A button should not. It should notice your pointer, celebrate your click, and calm down when you leave. Until now that meant animating in one tool, wiring logic in another, and hoping the developer rebuilt it right.
In PopCraft the logic sits on the timeline. You animate the whole story once, mark where each part starts, and a state machine decides which stretch plays when. Motion components let one animated piece live a hundred times, each instance starting on its own trigger. And when it has to leave the building, it goes as a dotLottie with the machine inside, or a web page.
39
Lottie templates, nothing baked
4
screens in the platformer, a machine each
5
triggers: load, in view, click, hover, state
1
timeline. No second tool.
TRY ONE FIRST
The Like button, taken apart
Open New file → Motion and search Like button. It is a heart run by a machine with four states, two Boolean inputs (hovered, liked), an event (finished) and one of each listener you will use most: pointer enter and leave on the frame, a click on the button, and Finished playing.
Press Present, hover the heart, click it twice. Then click State machine in the transport bar to see how it is wired. This is roughly the shape of it:
THE GRAPH
States, arrows, conditions
Each state plays one stretch of the timeline, between two markers, once or on a loop, at its own speed. Drag from a state’s handle onto another and you have a transition; pick it and give it conditions. Let go on empty space and you get a new state, already joined, with its name ready to type.
The Any state pill sends a transition from wherever the machine is: perfect for a reset event. It is the same graph editor as the shader nodes, so marquee, ⌘D, F to fit and the rest all work, and every edit is one undo step.
The Like button template in Animate with its state machine graph open under the canvas: Idle, Hover, Like and Unlike, and Any state. Hover is dragged to the right and its arrows follow. A transition is drawn from Unlike's handle onto Hover. One drawn from Like's handle and let go over empty space makes a new state there, already joined, named Celebrate in place; a double-click on empty space adds another, named Rest. Clicking the arrow from Idle to Hover shows its condition in the inspector. Right-clicking Like opens its menu: Rename, Make first state, Loop, Duplicate and Remove. Double-clicking Unlike renames it Undo like. A marquee selects Rest and Undo like, Cmd+D duplicates them and Delete removes the copies, and Cmd+Z undoes both. Scrolling pans, Cmd+scroll zooms, and F fits the graph.
PREVIEW
Poke it without leaving the editor
You do not have to present to test a machine. Click Play under the graph and it runs on the canvas: hover, click and press keys. The state it is in lights up green, so does the arrow that brought it there, and every input shows its value. When a hover does nothing, you can see why: the input never flipped, so the condition never held. Escape stops it.
The Like button template in Animate with its state machine graph open. Play under the graph starts the machine on the canvas. The pointer moving onto the heart makes it grow, and the Hover state and the arrow into it light up green with the hovered input showing true. A click fills the heart and the Like state lights up; Escape stops the preview.
GAME ON
Mossy Hollow: a platformer made of machines
The Mossy Hollow platformer template (New file → Game UI) is the big example. Four screens, a machine each, and an outlined pill on every screen showing which state is playing.
Pip, the hero, idles and runs on loops. Stomp, Slash and Hurt play once, then go back to Run if RUN is still held, or Idle if not. Holding RUN sets a Boolean: pointer down true, pointer up false. Gloop the slime patrols until the pointer enters its sight, a layer with enter and leave listeners, then turns Alert and chases. Flit the bat roosts until you come into its cave. The ? Block counts hits in a Number input and empties at three.
Nobody wrote a line of game code. It is timelines, markers and arrows.
→DRUN
Hold: Pip runs until you let go↑WSpace
Jump and stomp, a one-shot stateXJ
Slash, then back to Run or Idle1234
Switch screens: Level, Gloop, Flit, ? BlockR
Reset the ? Block’s hit countThe Mossy Hollow platformer in present mode. Holding RUN switches Pip from Idle to its Run loop and letting go switches back; JUMP plays the Stomp one-shot, SLASH the Slash one-shot, and the outlined pill shows which state is playing. The Gloop tab opens the slime’s own machine: the pointer entering its sight makes it spot you and chase, and a click squashes it.
The Burger reveal template in present mode. The burger is a 3D scene built from motion components. The pointer moves over the layers and each lifts as it is hovered; a drag across the burger orbits it in 3D.
REUSE
Motion components: animate once, place a hundred times
A motion component is a component with its own timeline. Every instance plays it on its own clock. Edit the component and every instance follows; change one instance’s settings and only it changes.
WHEN IT PLAYS
NOW!On load, when it scrolls into view, on click, on hover, or only when its variant changes. Each instance picks its own.
INPUTS
TUNE!Number and Color properties can feed a layer or a key. One counter component, and each instance counts to its own Target.
In a component set, each variant can have its own timeline. When an interaction swaps the variant, the new one plays and shared layers glide across with smart animate. Publish a library of them and the marketplace tags it Motion, with each component looping in the listing.
A lower third in Animate. With the lower third selected, + in the timeline and Create motion component turn it and its keys into a component with its own timeline; the breadcrumb now names the component. Create Instance in the Design panel places an instance, whose Motion section sets Loop to Ping-pong, and Space plays it.
An onboarding prototype. Present plays it from its first screen; a click on the button goes to the next screen with Smart animate: layers with the same name glide to their new places instead of cutting.
LOTTIE
Templates drawn for Lottie first
There are 39 Lottie templates: hero loops, animated icons, loaders, empty and success states, onboarding illustrations, feature explainers, chart animations and micro-interactions, in packs for eleven sectors plus a Techniques pack. Each is drawn so its export plays in any Lottie player exactly as it plays in Animate: nothing baked frame by frame, nothing turned into a picture.
ICON 512
Animated icons, loaders, success states. No background, so they sit on your page’s colour.
BUTTON 480×160
Buttons and toggles, like the Toggle switch with its little squash.
ILLUSTRATION 800×600
Empty states, onboarding, explainers and charts.
HERO 1600×900
Hero loops with a background, like Neural net pulse or Flight route.
The Shape morph template from the Lottie Techniques pack, in Animate and zoomed on its frame. Space plays it: one vector outline morphs from shape to shape on its keys, which a Lottie export writes as path keys at the same times and easing.
The Trim spinner template from the Lottie Techniques pack, in Animate and zoomed on its frame. Space plays the loader: the stroke’s trim start and end chase each other round the ring, the way a Lottie trim path does.
EXPORT
Lottie that tells you the truth
Pick Lottie in the export dialog, then Lottie JSON or dotLottie. Shapes, gradients, strokes and dashes, text as outlines (no fonts needed), groups as precomps, masks as track mattes, trim paths, shape morphs, motion paths and markers all carry over. A dotLottie can carry the state machine.
Curves Lottie cannot ease with, like springs and elastic, behaviours and text animators are baked a key per frame, and the list under the summary says so. Things Lottie cannot carry at all, like shaders, blurs and 3D, disable the option and the dialog names each layer and why. No silent surprises in your app build.
The Payment success Lottie template in Animate. Space plays it: the card flips and the tick draws on. The export button in the transport bar opens Export animation, where Lottie is picked as the format.
SHOWTIME
Present it: builds, advances and loops
Everything you animate plays when you present. Pause markers (amber, from a marker’s menu) make a slide stop and wait for your click, so a list arrives a point at a time. A click mid-stretch finishes it at once; the click after the last pause moves on.
Each slide’s Advance says how the show moves on: on click, when its animation ends, or after a delay. Loop the show turns a deck into a kiosk. A composition presents end to end with its sound, and going back plays transitions in reverse: a slide becomes a push, a circle wipe an iris.
A pitch deck slide in Animate whose three points arrive one after another. Its markers sit along the ruler, the amber ones pauses; double-clicking one shows its editor with Pause here when presenting on, and M adds another at the playhead. In present mode, the arrow key moves to the slide and then plays it on to its next stop each time, a point at a time.
The Like button Lottie template in Animate. The State machine button in the transport bar swaps the timeline for the machine’s graph: Idle, Hover, Like and Unlike joined by transitions, with the hovered and liked inputs and the listeners beside it. Picking the Like state shows what it plays. In present mode the pointer moves onto the heart and it grows; a click fills it with a burst, and a second click empties it.
FROM ZERO
A hover button in six moves
- 1
Animate the whole story
On one timeline: the idle loop, the hover, the press. Drop a marker with M where each part starts, and name it. - 2
Create the machine
Click State machine in the transport bar, then Create state machine. You get one state per stretch between markers. - 3
Add an input
Under Inputs, add a Boolean called hovered. Numbers, Text and events are there too. - 4
Draw the transitions
Drag from a state’s handle onto another state. Pick the arrow and give it a condition: hovered = true. Draw one back with false. - 5
Listen
Under Listeners, set Pointer enter on the button to Set hovered true, and Pointer leave to false. - 6
Present it
Press Present and hover. Then export a dotLottie with the machine inside, or a web page.
THE OLD WAY
Three tools and a prayer
| THE OLD WAY | IN POPCRAFT |
|---|---|
| Animate in one tool, wire logic in another | States play stretches of the timeline you made |
| Hand a developer a video of the hover | Hand them a dotLottie with the machine inside |
| Hope the export keeps your easing | It lists what is baked and refuses what it cannot carry |
| Rebuild the loader for every screen | One motion component, an instance per screen |
PLAY A GAME
Go stomp a slime
Open Mossy Hollow from New file → Game UI, press Present, and hold →. Then open the machines and see how little it takes. The state machine docs cover every input and listener, and the motion studio covers the timeline under it all.
ASKED & ANSWERED
Questions, answered
Is this like Rive or Lottie Creator state machines?
It is the same idea, built on the timeline you already have: states play stretches between markers, inputs hold values, listeners change inputs on pointer events, and transitions fire when their conditions hold. A dotLottie export can carry the machine.
What inputs and listeners are there?
Inputs are Booleans, Numbers, Text and events. Listeners fire on pointer down, up, enter, leave and click on a layer, on a key going down or up, and on Finished playing. A state can run actions on entry, such as adding one to a Number.
Where does the interactivity work?
In Present and prototypes, in a dotLottie export when Include state machine is on, and on exported web pages. Motion component instances become CSS animations on the web, started by a small script for click, hover and in view.
Are the Lottie templates really Lottie-ready?
Yes. Each is drawn for Lottie first, so it exports with nothing baked frame by frame and nothing turned into a picture. Tick Lottie-ready in New file to see only those.
Can I import a Lottie I already have?
Yes. Import a .json or .lottie and it comes in as a frame with a timeline at the file’s frame rate. Keys, bezier easing, motion paths, precomps, mattes and markers come with it, and a dotLottie’s first state machine becomes the frame’s machine. Anything with no counterpart, like expressions, is listed rather than dropped silently.
Does the platformer really play on a phone?
Every key in Mossy Hollow has an on-screen button or a pointer gesture too, so it plays with taps.
THE MANUAL, FOR THE DETAILS
KEEP EXPLORING
Goes great with
BOING! YOUR TURN.
State machines, motion components and Lottie that react. Free to start, in your browser or on your Mac.