Interactive UI in React, Vue and Svelte: What Changes for Motion
How React, Vue and Svelte differ for interactive motion, what each framework gives you, and when a shared runtime file is the better abstraction.
Core Takeaway
React, Vue and Svelte can all animate interactive UI, but they expose different primitives. React ties motion to state and rendering, Vue provides Transition and TransitionGroup, and Svelte has transition directives driven by the Web Animations API. A shared runtime file can move the interaction model out of the framework, at the cost of adding a runtime and a file format.
The shared problem
Every framework has to answer the same questions: what starts the motion, which state is active, what happens when the user interrupts, and how the element leaves the DOM. The syntax differs, but the underlying model is a state machine plus an animation engine. Understanding that model makes it easier to move between frameworks without relearning motion from scratch.
React
React ties animation to state and rendering. You can animate with CSS classes, the Web Animations API, a motion library or React's ViewTransition component. ViewTransition activates on Transitions, Suspense and useDeferredValue, and route navigations in frameworks such as Next.js are transitions, so it can animate navigation. The common mistake is storing animation progress in React state and re-rendering every frame; use the browser's animation APIs or a library that does.
Vue
Vue ships Transition and TransitionGroup for enter, leave and list movement. It applies named classes at each phase, so you can define timing and easing in CSS or hook into JavaScript hooks. That is convenient for common cases. For gestures and interruption, you still need a physics library or a state machine, because the built-in transition is tied to insertion and removal.
Svelte
Svelte's transition directives are driven by the Web Animations API rather than CSS. That is a useful detail: a global CSS rule that zeroes transition-duration does not affect them, so reduced motion has to be handled explicitly with the framework's prefers-reduced-motion store or a manual check. Svelte also supports reversible transitions, which are a good fit for toggles and conditional UI.
Where a shared file helps
If the same interactive component has to exist in more than one of these frameworks, rebuilding the state machine and springs three times is expensive. A runtime file can own the states and motion, and each framework only mounts the component and passes inputs. The trade-off is a new file format and runtime to learn, so use it when reuse is real, not hypothetical.
How to choose
Use the framework's built-in transition for simple enter and leave. Use a motion library when the component is complex but stays in one framework. Use a shared runtime file when the same interaction must run in several frameworks or on mobile. In every case, test interruption and reduced motion, because those are where framework demos usually fall short.
Key Principles to Remember
- All three frameworks need the same state and interruption model underneath
- React's ViewTransition activates through Transitions, Suspense and navigation
- Vue's Transition is convenient for enter and leave, not full gesture logic
- Svelte transitions use the Web Animations API, so reduced motion needs explicit handling
- A shared runtime file pays off when the same component must run in several frameworks
Frequently Asked Questions
Sources
- ViewTransition — React
- Transition — Vue.js
- transition: — Svelte