Lottie Viewer
Free online Lottie player. Open any Lottie JSON animation, play and pause, scrub frames, change speed, toggle loop and preview on a transparent checkerboard — fully in your browser.
What is a Lottie file?
A Lottie file is a JSON export of a vector animation, usually created in After Effects with the Bodymovin plugin or in tools like LottieFiles. Apps and websites play it with a lightweight renderer instead of a video, keeping file sizes tiny and quality perfect at any scale.
How do I preview a Lottie animation here?
Click the upload area or drag your .json file onto it. The animation loads instantly and starts playing. You can also click the example button to try the player with a built-in sample before using your own file.
Is my animation uploaded to a server?
No. The file is read and rendered entirely inside your browser tab. Nothing is transmitted anywhere, which makes this safe for unreleased client work and NDA assets.
What playback controls are available?
Play and pause, a restart button, a loop on/off toggle, a scrubbable frame slider, and a speed selector from 0.25x to 2x. The readout shows the current frame, total frames and the animation's frame rate.
Why is there a checkerboard background?
The checkerboard simulates transparency, exactly like in design tools. Use it to verify that your animation has no unwanted background, switch to white or black to check edges, glows and shadows on light or dark surfaces.
Which Lottie versions are supported?
The player uses the lottie-web renderer, which supports Bodymovin JSON from version 4 onward, including shape layers, masks, mattes, trim paths and most expressions baked in at export time.
Does it work on mobile devices?
Yes. The layout is responsive and rendering is done with the same SVG renderer, so it runs on iOS and Android browsers. Controls are sized for touch.
What is the difference between .json and .lottie files?
The .lottie format (dotLottie) is a compressed zip bundle that can contain the JSON plus assets and other modes. This viewer opens the standard Lottie .json export directly; for dotLottie files, extract the .json first.
Why does my animation play slowly or look wrong?
Heavy animations with many layers, images or expressions can be demanding to render. Check that images were not exported separately, simplify the composition, or try a lower speed — the FPS readout shows the animation's intended rate.
How to Use Lottie Viewer
This Lottie viewer plays Bodymovin JSON animations entirely in your browser with the lottie-web renderer. Load a file or drop it in, control playback frame by frame, and preview on transparent, white or black backgrounds — nothing is uploaded anywhere.
- Click the upload area or drag a Lottie .json file onto it; the animation loads and starts playing right away.
- Use the big play/pause button and the restart button to control playback.
- Drag the frame slider to scrub to any frame; the readout shows current frame, total frames and FPS.
- Pick a speed between 0.25x and 2x, and toggle the loop button for continuous replay.
- Switch the background between transparent checkerboard, white and black to inspect edges, glows and shadows.
Press the example button first to see how the player behaves before loading your own animation — handy when a client sends you a JSON and you need a quick check.
Related Tools
- SVG Viewer & Editor Preview, edit and optimize SVG files online. Real-time preview, code editing, and optimization tools.
- JSON Tree Viewer Visualize JSON data as an interactive collapsible tree. Search keys and values, track JSONPath on hover, and handle large files with lazy loading. Drag & drop .json files supported.
- Sprite Sheet Generator Combine images into sprite sheet with drag-to-reorder, grid layout, padding, scale modes. Export PNG/WebP/JPG with JSON atlas data for game engines and CSS sprites.
- Image to Base64 Convert images to Base64 strings and decode Base64 back to images. Supports PNG, JPG, GIF, WebP, SVG, BMP, ICO. 100% browser-based, no upload.
- GIF Split Frames Extract and download individual frames from GIF animations as PNG or sprite sheet. Free online tool with preview and ZIP export.
- GIF Reverse Reverse GIF animation playback order online for free. Upload, preview and download reversed GIFs instantly.
- GIF Speed Changer Change GIF animation speed online. Speed up or slow down GIF files instantly.
- Video to GIF Convert video to animated GIF online. Adjust quality, frame rate and resolution directly in your browser with no upload required.