Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Lottie Snippets — Free HTML CSS JS Lottie Animation Examples

7 snippets tagged Lottie · Live preview · Exports to React, Vue, Angular & Tailwind

Share & Support

What's included

Features

lottie-web loaded from a CDN, playing JSON animations with no build step
Play, pause, seek and segment control driven by interface state
Loop and one-shot patterns for loaders versus confirmations
Reduced-motion handling that falls back to a static frame
Renderer sizing that keeps a vector animation crisp at any container width

About this tool

Lottie Snippets — 7 Free Lottie Animation Examples

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.

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 LibrariesGSAPScroll AnimationData VisualizationMicro-InteractionsAll tags →