State machine templates
All the example animations on one page, to click through: All example animations.
New machine in the Interactive Studio starts from a template: a small machine already wired to your comp's markers and layers. Each template below has its own example comp in the sample project (folder Interactive examples) and a tutorial that sets it up step by step.
| Template | What it does | Your comp needs | Example |
|---|---|---|---|
| Toggle | A press plays forward, the next press plays back. | Nothing — any animation that goes from “off” to “on”. | Checkbox |
| Hover | Pointer enter plays forward, pointer exit plays back. | Nothing. | Arrow button |
| Click → segment | Clicking a layer plays that layer's segment. | One marker per choice, and a layer to click for each. | Colour picker |
| Number → segment | A number picks the segment (1, 2, 3…). | One marker per value, in order. | Star rating |
| Sequence | Plays every segment in order, each after the last. | Two or more markers. | Onboarding |
| Idle → action → Idle | Loops idle; a click plays the action once, then idles again. | Two markers: idle, action. | Bell |
| Intro → loop | Plays the intro once, then loops the rest for ever. | Two markers: intro, loop. | Logo |
| Intro → click | Plays the intro once and holds; a click then plays the action once and holds. | Two markers: intro, action. | Gift box |
| Hover + click | Hover plays one segment, a click plays another. | Two markers: hover, click. | Send button |
| Button | Loops idle; press and release each play their own segment. | Three markers: idle, pressed, release. | Press button |
| Loading → done | Loops loading until your page fires done, then plays the finish. | Two markers: loading, done. | Upload |
| Carousel | Shows each segment in turn, every 2 seconds, and starts over. | Two or more markers. | Weather icons |
| Toggle with two segments | A press plays “on”, the next press plays “off” — each its own animation. | Two markers: on, off. | Toggle switch |
| Submit: loading → success / error | A click starts loading; your page says done or fail; error retries on a click. | Four markers: idle, loading, success, error. | Submit button |
| Hold to confirm | Holding fills; letting go early runs back; filled to the end, it confirms. | Three markers: idle, fill, confirmed. | Hold to delete |
| Theme switch | A press plays “on” and switches to one theme; the next plays “off” and switches back. | Two markers (on, off) and two themes. | Theme switch |
| Counter → goal | Each click adds one and plays that count's segment; the last is the goal. | One marker per count. | Add to cart |
| Progress from the page | Your page sets 0–100; the animation shows that point and waits. | Nothing — the timeline is the scale. | Battery |
| Pulse N times | Plays a segment N times, then rests; a click plays it again. | One marker that starts and ends at rest. | New badge |
| Pick one (poses + blend) | Clicking a layer slides to its pose along the timeline. | One short marker per pose, a layer each. | Tab bar |
| Idle + random fidget | Loops idle; every 2–6 s, at random, plays a fidget once. | Two markers: idle, fidget. | Mascot |
| Blank → many patterns | Two machines and three themes in one file: 21 states, routing states, clicks, inputs, counters, random numbers, theme switching, events for your page. | A comp built for it (the sample Music player). | Music player |
| Blank → press, hold, wait | Pointer down/up, pointer move, a sleep timer, a text input compared with is not, a dial parked on a frame chosen by an input. | A comp built for it (the sample Thermostat). | Thermostat |
Blank starts from one state and nothing else, for when none of these fit.
Themes have no templates; see Themes by example for the usual cases and Themes lab for numbers, positions, scales and animated slots.
Which template for my case
Start from what the person does:
- Clicks / taps
- …and it flips between two looks, the same animation forward and back → Toggle; a different animation each way → Toggle with two segments; and the whole design re-paints (day / night) → Theme switch.
- …and one thing happens, then it rests again → Idle → action → Idle.
- …and starts work that can succeed or fail → Submit.
- …on one of several things, each with its own result → Click → segment; and the result slides along a path (tabs, a slider with stops) → Pick one.
- …several times, each adding one, up to a goal → Counter → goal.
- …to step through cards or screens → Sequence.
- Hovers (a mouse; on a phone a tap stands in; see touch)
- …and that's all → Hover.
- …and may click as well → Hover + click.
- Presses and holds → Button (pressed while down, released when let go); held long enough to confirm something → Hold to confirm.
- Nothing: the page decides
- …a value picks the result (a rating) → Number → segment; a continuous level (0–100) → Progress from the page.
- …work is in progress, then finishes → Loading → done; it may also fail → Submit.
- Nothing: it just plays
- …once, then settles into a loop → Intro → loop.
- …several pictures in turn → Carousel.
- …now and then, at random (a blink) → Idle + random fidget.
- …a few times to draw attention, then stops → Pulse N times.
Several of these at once, or something none of them does: Blank, and State machines, step by step.
More examples per template. Several pages end with a Variations gallery of live examples on other comps: Toggle (menu icon, password eye), Idle → action → Idle (Copy → Copied), Number → segment (password strength; a rating with a preview under the pointer), Hover (a gear that spins while hovered), Carousel (waits under the pointer), Sequence (Back and page dots).
Markers are segments
A template that plays segments reads them from the comp's markers. Give every marker a duration (Alt/Option-drag it in the timeline): a marker without one is a moment, not a stretch of animation, and a state that names it plays the whole animation instead. The Studio lists what it found under Segments, and names any machine that points at a marker the comp does not have. A template the comp cannot feed yet is greyed in the menu and says why: Needs 2 segments — this comp has 0.
End a segment one frame before the next begins when it stops on a result (a colour picked, a rating, a step that waits for a click) or loops. The player plays a segment through its last frame and stays there, so a marker 0–30 followed by one at 30 ends on the next segment's first frame. Measured in dotlottie-web: the colour picker's preview went grey again after every pick, and the weather icons flashed the next icon on every loop. A segment that hands straight over to the next one, with the same pose at the join, does not care.
After the template
A template is a starting point, not a form: once the machine exists you edit it like any other (states, wires, triggers and inputs) in the Graph, List or Advanced view. Nothing is locked to the template it came from.
To build a machine without a template, start from Blank. Combining everything: a music player builds a 21-state machine that way, and puts several of these patterns in one file.
Every trigger, condition, action and state setting, with what the player does and where it is shown: Every building block.