Migrating from Lottie to ExodeUI: Upgrading from Static JSON to Interactive Motion
If your web or mobile app relies on Lottie, you have probably experienced the pain of heavy bundle sizes, main-thread frame drops, and awkward manual playhead scrubbing (`lottieRef.playSegments([20, 60], true)`). This practical guide demonstrates how to replace passive Lottie animations with ExodeUI's interactive state machines and real GPU physics in under 15 minutes.
Side-by-Side Code Comparison: React Implementation
Notice how ExodeUI replaces imperative playhead scrub logic with declarative reactive input bindings:
// ❌ Legacy Lottie Implementation
// Requires heavy lottie-web (~65kb) + massive JSON files (500kb+)
import React, { useRef } from 'react';
import Lottie from 'lottie-react';
import animationData from './assets/complex-celebration.json';
export function LegacyLottieBadge() {
const lottieRef = useRef(null);
return (
<div className="badge-card" onClick={() => lottieRef.current?.play()}>
<Lottie
lottieRef={lottieRef}
animationData={animationData}
loop={false}
autoplay={false}
/>
</div>
);
}// ✅ Modern ExodeUI Implementation
// Hardware-accelerated WebGL runtime (~18kb) + interactive state machine
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function ModernExodeBadge() {
const [isCelebrated, setIsCelebrated] = useState(false);
return (
<div className="badge-card" onClick={() => setIsCelebrated(true)}>
<ExodeUICanvas
src="/scenes/interactive-badge.json"
inputs={{
"isCelebrated": isCelebrated,
"springTension": 180
}}
/>
</div>
);
}4-Step Migration Workflow
Audit Your Current Lottie Assets
Catalog which animations are simple passive spinners versus micro-interactions (e.g., animated switches, bookmark toggles, reaction buttons). Micro-interactions benefit immediately from ExodeUI's real-time state machines and touch velocity tracking.
Import Vector Assets into ExodeUI
Export vector paths from Figma or Illustrator and paste them directly into the ExodeUI Motion Development Environment. ExodeUI groups vector nodes cleanly and preserves gradient styling.
Build State Transitions with Springs
Define discrete state machine nodes (e.g., Idle, Hover, Active, Success) with spring damping and mass instead of baking hundreds of After Effects keyframes.
Mount <ExodeUICanvas /> and Remove Lottie
Replace the heavy <Lottie /> player wrapper with <ExodeUICanvas />. Remove lottie-web and lottie-react from your package.json, immediately saving ~65KB+ of JavaScript parsing overhead.