All example animations
Every example in these docs, playing in the player a web page uses (dotlottie-web). Press a name to play it here; Open goes to the page that shows how it is made. Each one is a .lottie the panel wrote from a comp in the sample project, folder Interactive examples. .lottie in the last column (or Download .lottie under any player in these docs) saves the file: bring it into After Effects with Files › To AE, change the animation, the themes or the machine, and build it again.
Checkbox — Click it.How it is made →
Loading the player…
One per template
| Animation | Try | Shows | Page | File |
|---|---|---|---|---|
| Click it. | Toggle | Open | .lottie | |
| Move the pointer over it and away. | Hover | Open | .lottie | |
| Click a dot. | Click → segment | Open | .lottie | |
Click a star, or set value. | Number → segment | Open | .lottie | |
| Next, Back, the page dots. | Sequence | Open | .lottie | |
| Click it. | Idle → action → Idle | Open | .lottie | |
| Watch: the intro plays once, then the loop. | Intro → loop | Open | .lottie | |
| Click it once the box has landed. | Intro → click | Open | .lottie | |
| Hover, then click. | Hover + click | Open | .lottie | |
| Press and hold, then let go. | Button | Open | .lottie | |
Fire done. | Loading → done | Open | .lottie | |
| Wait, click for the next icon, or rest the pointer on it to hold it. | Carousel that waits under the pointer | Open | .lottie | |
| Click it, then try the themes. | Toggle with two segments | Open | .lottie | |
Click, then fire done or fail. | Submit: loading → success / error | Open | .lottie | |
| Hold until it fills; let go early. | Hold to confirm | Open | .lottie | |
| Click the switch. | Theme switch | Open | .lottie | |
| Click three times. | Counter → goal | Open | .lottie | |
Set progress (0–100). | Progress from the page | Open | .lottie | |
| Watch it pulse, then click. | Pulse N times | Open | .lottie | |
| Click a tab. | Pick one (poses + blend) | Open | .lottie | |
| Wait for a fidget, click it, leave it for 15 s. | Idle + random fidget (blink, look, wave), click, sleep | Open | .lottie |
Variations
| Animation | Try | Shows | Page | File |
|---|---|---|---|---|
| Click it. | Toggle | Open | .lottie | |
| Click it. | Toggle | Open | .lottie | |
| Click it. | Idle → action → Idle | Open | .lottie | |
Set value 1–5. | Number → segment | Open | .lottie | |
| Move over the stars, click one, leave. | Poses + blend under the pointer | Open | .lottie | |
| Hover, then leave. | Hover on one segment | Open | .lottie |
Bigger examples
| Animation | Try | Shows | Page | File |
|---|---|---|---|---|
| Play, the heart, Next / Prev / Shuffle. | 21 states, routing, themes from the machine | Open | .lottie | |
| + / −, hold the centre, Heat / Cool / Eco. | Press and hold, timers, a dial driven by an input | Open | .lottie | |
| Click the card. | Two animations in one file, a theme each | Open | .lottie |
Themes
| Animation | Try | Shows | Page | File |
|---|---|---|---|---|
| Click the card: the next mode, its gradients, label and dot. | Gradient themes: three gradients re-coloured by one theme | Open | .lottie | |
| Wait 6 s or click the arrow: the next destination. | Image themes: the photo, the name and the accent swap together | Open | .lottie | |
| Pick a theme. | Every kind of slot: colour, number, position, scale, animated | Open | .lottie |
Driven by the page
| Animation | Try | Shows | Page | File |
|---|---|---|---|---|
| Drag the Scroll slider here; Open has the real thing, driven by the page scroll. | Scroll -> frame | Open | .lottie | |
| Type a name in the field (a long one too); click the card to wave. | Text from the page, fitted to the card (a text slot, the font in the file) | Open | .lottie | |
| Fire done, warn or fail; click the tile to start over. | A colour per state (state background) | Open | .lottie | |
| Scroll it out of view and back; click it to replay. | Play when it scrolls into view (the page fires show / hide) | Open | .lottie | |
| Click it, or Tab to it and press Enter or Space. | Keyboard: the page posts the same click | Open | .lottie | |
| Drag the needle slider. | A number slot set by the page | Open | .lottie |
The templates themselves, and which one fits your case: State machine templates.