Skip to content
Glenn Reyes
  • About
  • Posts
  • Appearances
  • Talks
  • Workshops
October 9, 2025

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.


About the Author

Glenn Reyes

Glenn Reyes

Software engineer, tech speaker and workshop instructor who loves turning ideas into reality through code. I build innovative products, share knowledge at conferences, and help developers create better user experiences with modern web technologies.

Subscribe to my Newsletter

Get subscribed to stay in the loop and receive occasional news and updates directly to your inbox. No spam, unsubscribe at any time.

Comments

What do you think about this article? Have you had a similar experience? Share your thoughts in the comments below!

All comments are stored as discussions on GitHub via giscus, so feel free to comment there directly if preferred. Alternatively, you can reach out to me on X (formerly known as Twitter) or send me an email. I'm always happy to hear from my readers!

© Glenn Reyes · Privacy · Legal

2025