How to Extract Lottie Animations from Any Website

The Challenge: Why Lottie Files are Hidden in the DOM

Lottie has completely transformed motion design on the modern web. Developed by Airbnb and powered by Bodymovin, it allows animators to export elaborate After Effects compositions into lightweight, vector-based JSON files. These animations run at silky-smooth 60fps across web browsers and native mobile apps without the massive bandwidth overhead of video files or pixelated GIFs.

However, when you discover a gorgeous micro-interaction or onboarding animation on sites like Stripe, Linear, or Apple and want to learn how it was constructed, the standard browser developer tools leave you hitting a wall:

• No static image elements: Unlike raster graphics (PNG, WebP), Lottie animations do not load through standard <img src="..."> tags.
• Canvas rasterization: When web developers configure lottie-web with the canvas renderer, the browser paints raw pixels onto a blank <canvas> element. Inspecting it reveals only an empty canvas with zero readable vector paths.
• Inlined and minified code: Modern build systems (Vite, Webpack, Turbopack) frequently inline small JSON animations as base64 strings or bundle them directly inside obfuscated chunk files.

"A Lottie animation on the web isn't a static asset—it is executable vector math. If you try to save it like an image, you end up with nothing."

Canvas, SVG, and JavaScript Bundling Obfuscation

To understand why traditional inspection fails, look at what happens behind the scenes when a site mounts a Lottie player:

The host application executes lottie.loadAnimation({ container: elem, renderer: 'svg', loop: true, autoplay: true, path: 'data.json' }). If the developer loaded the JSON inline, no network request for .json ever fires in your DevTools Network tab! Furthermore, the resulting DOM is flooded with thousands of mutated SVG <path> elements with cryptographic transform matrices that change every frame, making manual copying impossible.

How ZipIt Hooks Runtime Buffers

ZipIt features a dedicated DOM & Runtime Inspection Engine engineered specifically for rich media and motion design discovery. Instead of relying solely on static HTML scraping, ZipIt operates from inside the active browser execution context:

1. Runtime Player Hooking: ZipIt automatically detects active instances of lottie-web, @lottiefiles/lottie-player, dotLottie runtimes, and Rive players running in the window context.
2. Memory Buffer Capture: It extracts the in-memory animation schema directly from the player's JavaScript instance, bypassing CDN cross-origin restrictions, authentication headers, or bundle hashing.
3. Normalization & Clean Export: ZipIt validates the schema against the official Bodymovin specification, formats the JSON with clean indentation, and bundles it for instant one-click download.

Step-by-Step: Extracting Lottie with ZipIt

Extracting high-fidelity vector animations takes less than 15 seconds. Follow this seamless 4-step workflow:

Understanding the Extracted Bodymovin JSON Schema

Open the downloaded .json file in VS Code or any text editor. You will find the complete vector animation blueprint:

{
  "v": "5.7.4",
  "fr": 60,
  "ip": 0,
  "op": 180,
  "w": 800,
  "h": 600,
  "nm": "Hero Motion Graphic",
  "ddd": 0,
  "assets": [],
  "layers": [
    {
      "ddd": 0,
      "ind": 1,
      "ty": 4,
      "nm": "Accent Orb",
      "sr": 1,
      "ks": {
        "o": { "a": 1, "k": [{ "t": 0, "s": [0] }, { "t": 40, "s": [100] }] },
        "r": { "a": 0, "k": 0 },
        "p": { "a": 1, "k": [{ "t": 0, "s": [400, 300, 0] }, { "t": 180, "s": [400, 260, 0] }] },
        "s": { "a": 0, "k": [100, 100, 100] }
      },
      "shapes": [ ... ]
    }
  ]
}

Essential schema properties you can easily inspect and modify:

• "fr" (Framerate): Playback speed in frames per second (typically 30 or 60 fps).
• "ip" & "op" (In/Out Points): The start and end frame indices determining exact animation duration.
• "w" & "h": The reference coordinate bounds (vector paths scale smoothly to any container size).
• "layers": Hierarchical shape layers containing exact path coordinates, fills, strokes, and cubic bezier timing functions.

Embedding in Your Codebase

Now that you have the clean JSON asset, dropping it into your modern web stack is effortless. Here are the two industry-standard integration patterns:

Option A: Using the Official Lottie Web Player

<!-- 1. Include the lightweight web component -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!-- 2. Render animation with looping and autoplay -->
<lottie-player 
  src="./hero-animation.json" 
  background="transparent" 
  speed="1" 
  style="width: 100%; max-width: 480px; height: auto;" 
  loop 
  autoplay>
</lottie-player>

Option B: Using React / Next.js with `lottie-react`

import React from 'react';
import Lottie from 'lottie-react';
import animationData from './hero-animation.json';

export default function HeroAnimation() {
  return (
    <div className="w-full max-w-md mx-auto aspect-square">
      <Lottie 
        animationData={animationData} 
        loop={true} 
        autoplay={true}
        className="w-full h-full"
      />
    </div>
  );
}

Customization, Palette Editing & Ethical Use

Reverse-engineering animations is one of the fastest ways to learn how elite product studios choreograph transitions, bounce curves, and timing physics. To maximize your learning while respecting creators:

• Analyze the easing curves: Examine the cubic bezier control points in the JSON to replicate that organic, springy feel in your own Framer Motion or CSS keyframe animations.
• Re-theme colors effortlessly: Use the free ZipIt Lottie Previewer tool to swap hex codes across all vector shape fills without needing Adobe After Effects installed.
• Respect copyright and brand trademarks: Use extracted animations as educational blueprints, reverse-engineering exercises, and offline reference libraries. Never deploy proprietary commercial trademarks or bespoke brand illustrations directly into client deliverables without licensing.

Written by The ZipIt Engineering Team

We build tools that bridge the gap between design inspiration and production code. Our mission is to make the web transparent, inspectable, and accessible to creators worldwide.

Chrome Web Store ↗ Explore Features ↗ All Articles ↗