Lottie plays vector animations exported from After Effects as JSON, which makes it the practical bridge between a motion designer's file and a real interface. These snippets load lottie-web from a CDN and cover the patterns that actually earn their weight: loading indicators, success confirmations, empty-state illustrations and small looping accents.

Each one shows the parts that matter in production — controlling playback, reacting to a state change, and keeping the animation from fighting a user's reduced-motion preference.

Why JSON instead of a GIF or video

A Lottie file describes vector shapes and keyframes as data, not pixels, so it stays sharp at any size, is usually a fraction of the file size of an equivalent GIF, and can be recoloured or resized from CSS-adjacent code rather than re-exported. That is also what makes it editable after the fact — swapping a colour is a find-and-replace in JSON, not a re-render in After Effects.

Playback as an API, not a video tag

lottie-web exposes play, pause, stop, and setSpeed, plus segment control that plays only a portion of the timeline — the mechanism behind a success animation that plays its "build" segment once and then loops only the idle portion. These snippets drive that API from real interface state (a promise resolving, a click, a tab becoming visible) rather than firing it on a timer, which is what makes the animation feel like feedback instead of decoration.

Sizing and renderer choice

lottie-web can render to SVG, canvas or HTML, and the choice affects both crispness and cost: SVG stays vector-sharp and is the default for anything that scales with its container, canvas is cheaper for animations with very high shape counts. Every snippet here sets an explicit renderer rather than leaving it implicit, because the default is not always the right one for the animation's complexity.

Respecting reduced motion without losing the illustration

Because a Lottie animation is a real asset, not a CSS transform, the reduced-motion path here calls goToAndStop on a representative frame rather than removing the element — the user still sees the illustration doing its job as static art, they just do not see it move. That is a meaningfully better fallback than hiding the animation entirely, which is what a naive prefers-reduced-motion guard tends to do.

Real-world uses

Common Use Cases

Loading and processing states

A designed loop reads as intentional where a generic spinner reads as a stall — worth it on any wait longer than a second.

Success and celebration moments

A one-shot tick or burst on checkout, upload or signup completion, played once and then left in its final frame.

Empty states and onboarding

A small illustrated loop turns a blank screen into a moment of personality without a heavy hero image.

Handing motion work to designers

The animation lives in a JSON file, so a designer can iterate on it without touching your component code.

Got questions?

Frequently Asked Questions

From After Effects via the Bodymovin plugin, or from a free library such as LottieFiles. The snippet points at a URL, so swapping in your own animation is a one-line change.

The library itself is the main cost — roughly the weight of a mid-sized image. For one small loader, CSS is lighter. For several illustrated animations, or anything a designer needs to own, Lottie usually wins because the incremental cost per animation is just a small JSON file.

Check window.matchMedia("(prefers-reduced-motion: reduce)") before playing, and if it matches, call goToAndStop on a representative frame instead of play. The user still sees the illustration; it just does not move.

No. Every snippet is plain HTML, CSS and vanilla JavaScript that runs in any page — a static file, a WordPress theme, a Rails view, anything. When you do want a framework version, the editor exports each snippet as a React component, a React + Tailwind component, a standalone Tailwind HTML file, a Vue 3 single-file component or an Angular standalone component.

Yes — copy, modify and ship them in personal or commercial work, with no attribution required and no licence to track.

Yes. Every snippet opens in a live editor with separate HTML, CSS and JS panels and a preview that updates as you type. Check it at mobile, tablet and desktop widths, then copy the code or export it in your framework of choice.

Tags that appear alongside Lottie

JS Libraries GSAP Scroll Animation Micro-Interactions Data Visualization SVG Onboarding Loading States All tags →

Loading…