View Transition in React

The web is getting more cinematic. With React's ViewTransition component, you can create smooth, native page transitions that feel like mobile apps without complex animation libraries.

The Vanilla JS Way

The browser's ViewTransition API requires manual DOM manipulation:

// Vanilla JavaScript approach
function navigateToPost(postId) {
  // Start the transition
  document.startViewTransition(() => {
    // Update the DOM
    document.getElementById('content').innerHTML = getPostContent(postId);
  });
}

This works, but it's verbose and requires managing the DOM directly.

The React Way

React's unstable_ViewTransition component makes it dead simple, but you need to trigger it with startTransition:

import { unstable_ViewTransition as ViewTransition } from 'react';
import { startTransition } from 'react';
 
function PostTitle({ title, slug }) {
  return (
    <ViewTransition name={`post-${slug}`}>
      <h1>{title}</h1>
    </ViewTransition>
  );
}
 
// Trigger the transition
function navigateToPost(postSlug) {
  startTransition(() => {
    router.push(`/posts/${postSlug}`);
  });
}

The ViewTransition component marks which elements should animate. The startTransition wrapper tells React when to activate those animations.

What Are View Transitions?

View transitions create smooth animations between different states of your app. Think of how iOS apps animate between screens: that's what you get on the web now.

The browser automatically creates a transition between the "old" and "new" states, morphing elements it can match between the two renders.

How Transitions Are Triggered

React's view transitions only activate when you wrap state updates in a startTransition:

import { startTransition } from 'react';
 
// ✅ This triggers view transitions
startTransition(() => {
  setActivePost(newPost);
});
 
// ❌ This does NOT trigger view transitions
setActivePost(newPost);

For navigation, Next.js Link components automatically use startTransition internally, so clicking links will trigger view transitions without extra code.

Putting It Together

After trying a bunch of helpers I ended up keeping the setup simple. Wrap the element you want to animate with ViewTransition, and trigger navigation inside startTransition:

import type { ReactNode } from 'react';
import {
  unstable_ViewTransition as ViewTransition,
  startTransition,
} from 'react';
import { useRouter } from 'next/navigation';
 
function PostTitle({ children }: { children: ReactNode }) {
  return (
    <ViewTransition name="post-title">
      <h1>{children}</h1>
    </ViewTransition>
  );
}
 
function usePostNavigation() {
  const router = useRouter();
 
  return (slug: string) => {
    startTransition(() => {
      router.push(`/posts/${slug}`);
    });
  };
}

That’s the whole recipe—React handles wiring the browser API for you, so there’s no need for extra CSS selectors or custom link components. If you want multiple elements to animate, wrap each one in ViewTransition and give it a unique name.

Next.js Configuration

Enable the experimental feature:

// next.config.ts
const nextConfig = {
  experimental: {
    viewTransition: true,
  },
};
 
export default nextConfig;

Why This Matters

View transitions solve a real problem. Traditional page navigation feels jarring: content just pops in and out. With view transitions, users get visual continuity that makes your app feel polished.

The best part? It's progressive enhancement. Browsers that don't support it just show normal navigation.

Implementation Tips

1. Use consistent naming: post-${slug}, talk-${slug}, etc.
2. Start simple: Focus on titles and key elements first
3. Test across browsers: Chrome has the best support currently
4. Keep it subtle: Over-animation can feel gimmicky

The Future

This is just the beginning. React's ViewTransition integration opens up possibilities for:

• Smooth route changes in SPAs
• Gallery transitions
• Modal animations
• List reordering effects

Getting Started

Want to try it? Use React's ViewTransition component and start with your most important page transitions. The API is straightforward, and the results are immediately satisfying.

The web is becoming more app-like, and React's ViewTransition integration is a big step in that direction. Your users will notice the difference.

👉 Bottom line: React's ViewTransition integration makes smooth page animations trivial. It's time to make your app feel more native.

Source Code

You can explore the complete implementation in the glennreyes.com repository. The ViewTransition integration was added in this pull request with all the changes shown above.