lottieditorLottieditor guides
Lottie animation examples with editable source
Download and use these six animations without an AI assistant. Each includes Lottie JSON, editable source, and a preview. To make your own version with an assistant, start with the included prompt.
The supplied example files are free to use and modify. AI responses can vary. Exports you create in the full editor use its normal plan limits.
A staggered logo reveal
Bring three pieces of a geometric mark into place, then hold the finished logo.
An animated three-bar chart
Grow three bars from a common baseline while keeping the values easy to compare.
A bell that rings once
A small rotation sequence and a notification dot draw attention without an endless loop.
A moving button arrow
A restrained arrow nudge gives a call-to-action a direction without moving the button itself.
A badge with a short pop
A star badge grows into place with a small overshoot and two staggered sparkles.
A three-step onboarding sequence
Three circles and connecting lines reveal in order to explain a short process.
Use an example in your website
Follow the React Lottie example or the plain HTML tutorial, then replace the sample JSON with one of these downloads. For more designs with color and timing controls, browse the Lottie templates.