Migrating from Framer Motion to ExodeUI: Upgrading to Visual State Machines
Framer Motion made declarative animation in React accessible, but as applications scale, managing dozens of nested `motion.div` variant objects and imperative `useAnimate` timelines creates heavy bundle overhead and maintenance friction. This guide shows how to migrate to ExodeUI’s visual state machines and hardware-accelerated runtime in under 20 minutes.
To migrate from Framer Motion to ExodeUI in React, replace verbose `motion.div` variant dictionaries and `AnimatePresence` blocks with an <ExodeUICanvas /> component. Instead of calculating spring transitions inside JavaScript on the main thread, ExodeUI evaluates state machines and harmonic physics directly via GPU-accelerated pipelines, receiving simple boolean or numeric input props from your React state.
Side-by-Side Code Comparison: React Implementation
Compare how component logic shifts from complex nested styling objects to a single declarative state machine canvas:
// ❌ Legacy Framer Motion Implementation
// Heavy runtime bundle, main-thread JS calculations, manual variant objects
import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
const buttonVariants = {
idle: { scale: 1, backgroundColor: '#3b82f6' },
hover: { scale: 1.05, transition: { type: 'spring', stiffness: 400, damping: 17 } },
tap: { scale: 0.95 },
success: { scale: 1, backgroundColor: '#10b981' }
};
export function FramerMotionButton() {
const [isSuccess, setIsSuccess] = useState(false);
return (
<motion.button
variants={buttonVariants}
initial="idle"
whileHover="hover"
whileTap="tap"
animate={isSuccess ? "success" : "idle"}
onClick={() => setIsSuccess(true)}
className="px-6 py-3 rounded-xl font-medium text-white"
>
{isSuccess ? 'Completed' : 'Submit'}
</motion.button>
);
}// ✅ Modern ExodeUI Implementation
// Hardware-accelerated state machine, clean declarative props, zero DOM thrashing
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function ModernExodeButton() {
const [isSuccess, setIsSuccess] = useState(false);
return (
<div className="btn-wrapper" onClick={() => setIsSuccess(true)}>
<ExodeUICanvas
src="/scenes/interactive-button.json"
stateMachine="ButtonMachine"
inputs={{
"isSuccess": isSuccess
}}
onStateChange={(state) => {
if (state === 'Complete') console.log('Animation finished');
}}
/>
</div>
);
}Step-by-Step Migration Workflow
Map Framer Motion Variants into Visual States
Identify your motion variants (e.g. `idle`, `hover`, `active`, `exit`). In ExodeUI, create corresponding state nodes on the visual layer. Easing curves, spring tension, and friction are set visually with instant live scrubbing.
Define State Machine Inputs
Create simple inputs (booleans, numbers, or triggers) in the ExodeUI Inspector. Transitions between your states fire automatically based on condition rules you define visually (e.g., `when isHovered == true transition to HoverState with Spring`).
Install exodeui Runtime Package
Install the official npm package: npm install exodeui. Place your exported .exode or JSON asset in your public folder.
Replace motion Elements with <ExodeUICanvas />
Swap your `motion.div` tags for `<ExodeUICanvas />`. Pass your component state directly to the `inputs` prop. Your React code is now clean, unburdened by heavy transition math.
Related Migration & Runtime Resources
Frequently Asked Questions
Why migrate from Framer Motion to ExodeUI?
While Framer Motion is popular for simple DOM CSS transitions, complex multi-state animations in Framer Motion result in heavy JavaScript bundles, frequent main-thread re-renders, and brittle coordinate math. ExodeUI moves animation authoring into a visual canvas that compiles directly to open .exode state machines, decoupling animation complexity from your React bundle size.
Can ExodeUI handle layout animations like Framer Motion's layoutId?
Yes. ExodeUI supports responsive constraints and layout transitions natively inside the editor, maintaining seamless visual continuity across size changes and state transitions.
How does ExodeUI handle springs compared to Framer Motion?
Framer Motion computes spring physics inside JavaScript on the main browser thread. ExodeUI calculates harmonic spring physics via hardware-accelerated GPU pipelines, preventing stutter during heavy React data reconciliation.
Can non-developers edit ExodeUI animations without touching React code?
Yes. With Framer Motion, every curve or duration tweak requires a developer to alter code, rebuild, and submit a PR. With ExodeUI, designers or marketers can adjust states, physics, and vector shapes in ExodeUI Studio or via AI prompts in Claude Code / Cursor MCP, updating the .exode asset without touching application JSX.
Upgrade from Code-Heavy Animation to Visual State Machines
Create interactive, fluid UI animations that your entire team can design, iterate on, and ship with confidence.