The Best View Transition Libraries and Setups in 2026
View transitions used to mean a JavaScript router and a lot of custom code. The browser now does the work, including cross-document transitions between separate pages. The library question has become a framework question: most wrappers exist to make the native API fit a router you already use.
We make ExodeUI, which is a design tool and runtime, not a view-transition wrapper. It appears here for animating UI within a page.
Start with the native View Transitions API and add named elements for shared components. In React, use your router's support, such as React Router's, rather than a separate library. In Astro, the built-in transitions are the least JavaScript. Next.js has its own integration that changes between versions, so check the current docs. Swup remains useful when you want client-side transitions on a server-rendered site without a framework.
Quick picks by job
| If you need | Use |
|---|---|
| Cross-document transitions with no framework | Native View Transitions API |
| React apps on React Router | React Router |
| Content sites on Astro | Astro transitions |
| Next.js apps | Next.js view transitions |
| Server-rendered sites without a framework | Swup |
How we compared them
- Whether it is a browser feature, a router feature or a separate library
- How it degrades in browsers without support
- The amount of client JavaScript it adds
The 5 best view transition setups
1. Native View Transitions API
Best for: Shared-element morphs and cross-fades between pages
- Platforms
- Modern browsers
- Price
- Free, built into the browser
- Output
- Transitions handled by the browser
The API snapshots the old view and animates to the new one. Naming an element lets it travel between pages instead of fading. Cross-document transitions work with normal links, which means a server-rendered site can get app-like motion without becoming an app.
Pros and cons
- No dependency
- Works across separate documents
- Shared elements move rather than cross-fade
- Support varies by browser and version
- Limited choreography control
2. React Router
Best for: React apps that already navigate with React Router
- Platforms
- React
- Price
- Free and open source
- Output
- Route-level transitions
React Router exposes view transitions on navigation, so you do not add a second routing system to get them. You can opt in per navigation and name elements that should persist. The result depends on the browser, and the fallback is the normal instant navigation.
Pros and cons
- No extra router
- Per-navigation control
- Works with the native API
- Only for React Router projects
- Browser-dependent
3. Astro transitions
Best for: Static sites that want fast, animated navigation
- Platforms
- Astro sites
- Price
- Free, part of Astro
- Output
- Page transitions with minimal client JavaScript
Astro's router wires the native API into a static site, keeping the JavaScript cost low. It is the simplest path for a blog, docs site or marketing site. Complex shared-element choreography still needs custom CSS.
Pros and cons
- Very little JavaScript
- Simple setup
- Works with content collections
- Astro only
- Limited to native capabilities
4. Next.js view transitions
Best for: Next.js apps that want transitions without a third-party router
- Platforms
- Next.js
- Price
- Free and open source
- Output
- Transitions tied to the App Router
Next.js has been adding view transition support around its App Router. The integration has changed between versions, so treat any tutorial older than your framework version with suspicion and check the current documentation. It is the right choice for a Next.js app and the wrong one for anything else.
Pros and cons
- Fits the App Router
- No third-party router
- Uses the native API
- Version-specific behaviour
- Documentation churn
5. Swup
Best for: Older browser support and custom transition choreography
- Platforms
- Any server-rendered site
- Price
- Free and open source; paid plugins available
- Output
- Client-side page swaps with transition hooks
Swup predates the native API and still earns its place: it works in browsers without view transitions, gives you hooks for GSAP timelines, and handles scripts and analytics across page swaps. If you need the transition to be identical everywhere, it is more predictable than the native API.
Pros and cons
- Works without native support
- Rich hooks for custom animation
- Mature plugin ecosystem
- Adds a client-side router
- More setup than the native API
You have read the list. The one we make is one click away.
Free Community plan. One open .exode file that runs in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter.
Also worth a look
Always plan the no-transition version
View transitions are an enhancement. If the browser does not support them, the user should get a fast, normal navigation, not a blank screen. Test with the feature disabled, and never put content behind a transition that must complete before it becomes visible.