Six months ago, our React app's animation stack looked like a dependency graveyard:
- Rive for interactive vector graphics
- GSAP for timeline-based UI animations
- Lottie for JSON animations imported from design
- Framer Motion for React-specific transitions
- Plus a few hand-rolled CSS animations for good measure
Four tools. Four mental models. Four runtime dependencies. And a growing gap between what designers shipped and what developers could maintain.
We consolidated everything into a single visual runtime. Here's what actually happened.
The Problem Nobody Talks About
Animation tools are great in isolation. The cracks appear when you need a single component to do multiple things:
- A button that plays a Rive animation on hover, transitions with Framer Motion on click, and shows a Lottie loading state
- A card that animates into view with GSAP, has hover states in Rive, and a pressed state in CSS
- A form that validates with Framer Motion shake animations, loads with Lottie spinners, and succeeds with a Rive celebration
Each tool handles its piece. None of them talk to each other. You end up writing coordination code that's more complex than the animations themselves.
What We Switched To
We moved to ExodeUI — a visual runtime that combines state machines with vector rendering. Instead of four tools plus coordination code, we have:
- One editor where designers define visual states as nodes
- One file format that stores both appearance and behavior
- One export that generates production React components
- One runtime that renders everything natively
The pitch sounds almost too clean. We were skeptical too.
What We Actually Gained
1. Eliminated three runtime dependencies
Removing Rive's .riv player, Lottie's JSON player, and GSAP's timeline engine from our bundle saved roughly 180KB gzipped. Not life-changing for desktop, but noticeable on mobile.
2. Design files became production code
The biggest win wasn't technical — it was process. Our designer builds components in ExodeUI with states wired in. The output is a React component. No more handoff.
3. State management simplified
Before: animation state lived in GSAP timelines, component state lived in React hooks, and visual state lived in Rive files. Three sources of truth.
After: one visual state machine defines every state of the component.
4. Cross-platform without rewrites
We ship React for web and Swift for iOS. ExodeUI exports to both from the same visual file.
What We Lost
1. Existing animations didn't auto-migrate — had to rebuild as state nodes
2. The library effect — GSAP's ScrollTrigger/MorphSVG have no direct equivalent
3. Team learning curve — first week slow, second week faster than before
Who This Is For
This worked because our product is an application — forms, data displays, multi-state components. If you're building a marketing site, stick with GSAP + CSS. If you're building a SaaS product, this is where the savings compound.
The Numbers
Before: 4 tools, ~280KB runtime, 3-person-week per cross-platform feature
After: 1 runtime, ~90KB total, 1-person-week per cross-platform feature
Built with ExodeUI (exodeui.com). This post is honest — the migration was work, but the outcome justified it.
Top comments (0)