Lottie animations are everywhere – smooth, lightweight, and perfect for modern web design. But downloading them from live websites has always been a pain. Until now.
Here's how to extract Lottie animation JSON files from any website using MiroMiro.
What Are Lottie Animations?
Lottie is a JSON-based animation format created by Airbnb that's become the industry standard for web animations. Think of those smooth loading spinners, animated icons, and micro-interactions you see on modern websites – many of them are Lottie files.
- Tiny file size – 10-100x smaller than GIFs
- Scalable – Looks crisp on any screen resolution
- Editable – Change colors and properties with code
- Cross-platform – Works on web, iOS, Android, and more
The Problem: You Can't Just "Save As"
You're browsing a website and spot a beautiful animated icon. You want to use something similar in your project, but how do you download it?
Beautiful Lottie animations are everywhere, but saving them isn't straightforward.
Unlike regular images, Lottie files are embedded as JSON data or loaded via JavaScript. You can't right-click and save them. You'd need to dig through DevTools, hunt for network requests, or just give up. MiroMiro solves this instantly.
The Solution: MiroMiro's Lottie Detector
MiroMiro automatically detects every Lottie animation on any webpage and lets you preview and download them with a single click. Here's how it works:
Step 1: Install MiroMiro
First, install the MiroMiro Chrome extension from the Chrome Web Store. Free to install, with a 3-day free trial that unlocks unlimited Lottie downloads and every other feature — no credit card required.
- Unlimited Lottie downloads
- CSS Inspector — copy any site's styles
- SVG Extractor — grab icons and graphics
- Font Detector — identify any typography
- Asset Downloader — images, videos, and more
Step 2: Browse Any Website with Lottie
Visit any website that uses Lottie animations. Popular sites like Notion, Stripe, and thousands of landing pages use Lottie for their animations.
Step 3: Open the Lottie Tab
Click the MiroMiro extension icon and open the Lottie tab. The extension automatically detects every Lottie animation on the page and shows them as a live preview — no hovering or inspecting required.
MiroMiro automatically finds every Lottie on the page.
Step 4: Preview the Animation
Click on any detected Lottie to see a live preview. You can play, pause, and scrub through the animation to make sure it's what you want.
Preview animations before downloading to find exactly what you need.
Step 5: Download as JSON
Click the download button to save the Lottie animation as a JSON file. That's it! You now have the raw animation file.
Step 6: Use Your Lottie Animation
Import the JSON file into your favorite tools:
- LottieFiles.com – Edit colors, speed, and export to different formats
- After Effects – Import with the Bodymovin plugin for further editing
- Your website – Use the Lottie Web Player or React component
- Figma/Framer – Import as animated assets
Import your downloaded JSON into tools like LottieFiles for further customization.
Extracting Lottie from Specific Platforms
MiroMiro detects the actual Lottie JSON files loaded by a webpage — so it works the same way regardless of which player or framework the site uses. Here's what to expect on the platforms you're most likely to run into.
How to download Lottie from Framer sites
Framer sites ship Lottie animations as standard JSON files, which MiroMiro detects reliably. Open any published Framer site, click the MiroMiro icon, and open the Lottie tab — you'll see each animation listed with a live preview. Hero animations, section icons, and scroll-triggered Lotties are all picked up. Download as JSON and drop straight back into your own Framer project via the Lottie component.
How to download Lottie from any other site builder or framework
Because MiroMiro looks for the underlying Lottie JSON rather than a specific player library, it doesn't care whether the site is built on Webflow, Wix, Next.js, Nuxt, React, Vue, or a hand-rolled stack. If the page loads a Lottie JSON file, MiroMiro surfaces it in the Lottie tab.
How to download Lottie from SaaS landing pages
Most modern SaaS landing pages (Stripe, Linear, Notion, Vercel, Figma, Raycast) serve their animations as standard Lottie JSON. Open the page, click the Lottie tab, and extract — marketing sites often have 5–20 Lotties per page, and you can preview and download them in one session.
When Lottie isn't detected
A small number of sites inline Lottie data directly into a JavaScript bundle or convert animations to SVG/CSS before shipping — in those cases the JSON never loads as its own file, so there's nothing for MiroMiro to detect. Use the SVG Extractor or CSS Inspector to grab the source instead. You almost never lose the asset; you just grab it in a different format.
Video Walkthrough
Watch this quick tutorial to see the entire process in action:
FAQ: Lottie Animation Downloads
Is it free to download Lottie animations with MiroMiro?
Yes — MiroMiro gives you a 3-day free trial with full access, no credit card required. You can download unlimited Lottie animations (and extract CSS, SVGs, fonts, and assets) during the trial. Keep going with Starter or Pro after.
Can I use downloaded Lottie animations commercially?
Always check the licensing of animations before using them commercially. MiroMiro helps you download the files, but you're responsible for respecting copyright. Use them as inspiration or reference, or download from sites that offer free/licensed animations.
What can I do with the JSON file?
The JSON file is the raw Lottie animation. You can import it into LottieFiles to customize colors/speed, use it directly on your website with the Lottie player, or edit it in After Effects with the Bodymovin plugin.
Does MiroMiro work on all websites?
MiroMiro detects the actual Lottie JSON files loaded by a webpage, which is how most sites ship Lottie animations — including Framer sites and most SaaS landing pages. If a site inlines the animation data into a JavaScript bundle or converts it to SVG/CSS, it won't appear in the Lottie tab; use the SVG Extractor or CSS Inspector for those cases.
Can I edit the Lottie after downloading?
Absolutely! Upload the JSON to LottieFiles.com (free) to change colors, adjust timing, or convert to GIF/MP4. You can also edit the source in After Effects if you have the original project.
Keep Reading
- Websites That Use Lottie Animations: Real sites we've scanned with MiroMiro, showing how many Lotties each one loads
- Free Lottie Animations: Best Resources: Top libraries and marketplaces for free Lottie files
- Lottie Preview Tool: Test and preview Lottie JSON files online for free
- Lottie Animation Extractor: Extract Lottie animations from any live website
- SVG Extractor: Extract SVG icons and graphics alongside your Lottie files
Ready to speed up your workflow?
Join 6,000+ designers and developers who save hours every week with MiroMiro.
Add to Chrome
