All Posts
Benchmarks

Animation Library Bundle Size Benchmark: ExodeUI vs Rive, Lottie, GSAP, Framer Motion

2026-09-09Shinoj CMFounder & Principal Engineer
Share:

Animation Library Bundle Size Benchmark: ExodeUI vs Rive, Lottie, GSAP, Framer Motion

TL;DR: ExodeUI's runtime is the heaviest of the five runtimes we tested — 758 KB gzipped, 7.5× Rive's canvas runtime. The weight is the bundled Rapier2D WASM physics engine. If you need one tiny animation, do not use ExodeUI today. If you need full rigid-body physics and state machines in production UI, here is what that currently costs and how to contain it.

Most "bundle size comparison" posts are marketing. This one is not, because we expected to win and we didn't. We built the same minimal app five times — one animated element, one interaction — and measured the shipped JavaScript with Vite 5's production build (esbuild minify). Raw numbers, versions, and methodology below so you can reproduce every figure.

Results (gzip, production build)

RuntimeVersionRawgzipvs Lottie
@lottiefiles/dotlottie-web0.80.0200 KB58 KB1.0×
GSAP3.15.0208 KB71 KB1.2×
Framer Motion11.18.2248 KB80 KB1.4×
@rive-app/canvas2.42.0333 KB100 KB1.7×
exodeui (React SDK)6.4.52,113 KB758 KB12.8×

All five apps include React 18 + react-dom (~44 KB gzip), so the deltas between rows are the animation runtimes themselves.

Why ExodeUI Is Heavy — The Honest Breakdown

The ExodeUI SDK bundles @dimforge/rapier2d-compat — a 1.69 MB WebAssembly rigid-body physics engine. That's ~80% of the total payload. Rive, Lottie, GSAP, and Framer Motion don't simulate physics; they interpolate keyframes or drive a playhead, so their runtimes are small.

The comparison is not really "animation library vs animation library." It's:

  • A playback/interpolation runtime (58–100 KB gzip), versus
  • A physics simulation engine + playback + state machine compiler (758 KB gzip)

That doesn't make the number smaller. 758 KB is 758 KB. On a mid-range Android phone on 4G, that's seconds of load time if you ship it eagerly. If your use case is a hero-section animation or a loading loop, use one of the lighter runtimes — that is a completely honest recommendation.

What the Weight Buys (and What It Doesn't)

To be fair to both sides of the trade-off:

What the physics engine buys: real rigid-body simulation — gravity, collisions, springs, impulses — reacting to live user input and application state, compiled as part of your component. None of the four lighter runtimes can simulate a draggable stack of cards settling under gravity.

What it doesn't buy back: the cost applies whether or not your scene uses collisions. Rapier ships even when your component only needs a spring. That's a packaging failure on our side, and we're saying so publicly: lazy WASM loading and physics-tree-shaking are the most requested items on our runtime roadmap. Hold us to it.

How to Contain the Cost Today

If you do need ExodeUI's physics, don't ship it in your main bundle:

import { lazy, Suspense } from 'react';
const ExodeUICanvas = lazy(() =>
  import('exodeui').then((m) => ({ default: m.ExodeUICanvas }))
);

// The 758 KB lands on the interactive island, not first paint
<Suspense fallback={<div style={{ height: 300 }} />}>
  <ExodeUICanvas src="/animations/hero.json" autoPlay fit="Contain" />
</Suspense>

Combined with code-splitting per route, the payload is paid only by users who reach the interactive surface — not by everyone.

Methodology (Reproduce It Yourself)

  • Build tool: Vite 5.4.21, @vitejs/plugin-react 4, minify: esbuild, production mode
  • React: 18.3.1 in all five apps
  • Each app: minimal entry rendering one animated element with the library's canonical "hello world" usage from its README
  • Measurement: sum of all emitted .js files, raw and after gzip -c
  • Not measured (deliberately): runtime FPS, memory, WASM instantiation time. Bundle size is only the first axis — a full runtime benchmark suite is planned for Q4 2026.
  • Caveats: Rive's .riv assets are typically much smaller than ExodeUI JSON files for equivalent scenes; asset size is a separate axis from runtime size. dotlottie-web loads its player differently than an ES import in some setups.

We will re-run this benchmark on every ExodeUI minor release and update the table. If the numbers stop flattering us, they'll still be published here.

The Decision Rule

  • Decorative loops, tiny footprint: dotlottie-web (58 KB) or GSAP (71 KB)
  • Interactive React transitions, code-first: Framer Motion (80 KB)
  • Smallest runtime + canvas rendering: Rive (100 KB + tiny .riv assets)
  • Full physics simulation in product UI, designers authoring, React/Swift export: ExodeUI (758 KB today — lazy-load it, and watch this space)
Back to Blog
Built with ExodeUI