标签：#gsap

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 stat