What this tool does
Drop a Lottie .json file (or paste a LottieFiles URL) and the animation plays immediately, rendered with the official lottie-web library for pixel-accurate output. On top of playback you get a frame scrubber, speed and direction controls, a background switcher, a live colour editor, and an export button that produces a modified JSON file.
What Lottie actually is
Lottie is an open JSON-based animation format created at Airbnb. Rather than storing pixels frame by frame like a GIF or video, a Lottie file stores a description of the animation — vector shapes, transforms, and keyframes exported from Adobe After Effects.
Because it is vector data rather than raster frames, the practical consequences are significant: files are tiny (often a few kilobytes for an animation that would be a multi-megabyte GIF), they scale to any resolution without blurring, they support true transparency, and because the data is just JSON, properties like colour can be changed programmatically at runtime.
How the live colour editor works
The tool walks the Lottie JSON structure and finds every solid fill and stroke colour value in the shape layers. Each discovered colour is exposed as a picker. When you change one, the JSON is patched in memory and the animation is reloaded with the new value, so you see the result within a fraction of a second.
Hitting export serialises that patched JSON back out as a new file. This means you can take a stock animation and match it to your brand palette without opening After Effects or asking a designer — a workflow that previously required the original project file.
Why preview before you ship
Checking a Lottie animation used to mean spinning up a local React project or importing the file into a design tool. That is disproportionate effort for a quick look. Being able to drop the file into a browser and immediately see it play — at the right speed, on the right background — catches problems early:
- Contrast failures: an animation that looks perfect on white may vanish on a dark background. Switch the canvas colour to check both.
- Timing issues: use the speed control and frame scrubber to see whether a loop stutters or a transition is too fast.
- Spec mismatches: the metadata panel shows frame count, frame rate, duration, dimensions and layer count, so you can confirm the file matches what your developer expected.
- File integrity: a Lottie that fails to load here will fail in production too, and it is far cheaper to find that out now.
Where to find animations
LottieFiles hosts a large library of free community animations that you can download as JSON and drop straight into this player. Google's Material Symbols also ships Lottie versions of its icon set. Once loaded, you can recolour and export any of them to fit your own design.
For background reading see our guides on practical Lottie animations, going from After Effects to the web, and CSS animations versus Lottie.
Frequently Asked Questions
What is a Lottie file?
A JSON-based vector animation format created by Airbnb. It stores a description of the animation — shapes, transforms, and keyframes — rather than rendered pixels, so files are tiny and scale perfectly.
Can I change colours without After Effects?
Yes. The tool finds every fill and stroke colour in the JSON and exposes a picker for each. Change them, preview live, then export the modified file.
Is my animation file uploaded?
No. The file is read and rendered locally in your browser. Nothing is transmitted to a server.
Why won't my file load?
The file must be valid Lottie JSON. Files exported for other players, dotLottie archives, or truncated downloads will fail. If it fails here, it would likely fail in production too.