Introducing the View Transitions Plugin for WordPress

I’m thrilled to announce a new plugin from the WordPress Core Performance Team: View Transitions! This experimental plugin brings the power of the cross-document View Transitions browser API to your WordPress site, allowing for smoother, animated transitions between page navigations.

View Transitions?

Traditionally, moving from one page (or, technically, URL) to another on the web has always involved an abrupt, “hard” reload. While this might seem completely natural to many of us on the web, user expectations have shifted drastically in the past (almost) two decades.

Native mobile applications, with their seamless in-app navigations and smooth transitions, have set a new bar for user experience. This has led web developers to try to catch up with that experience, often turning to Single Page Applications (SPAs). While SPAs aim to mimic native app navigations by dynamically updating content without full page reloads, this often comes with increased development complexity and a shift in how you structure your entire website, often at the cost of accessibility or performance.

Now, with cross-document view transitions, you can achieve that desired user experience through smooth transitions on the web without any extensive overhaul of your website. And the new View Transitions plugin makes it super simple in WordPress.

How Do View Transitions Work in WordPress?

As soon as you have activated the plugin on your WordPress site and navigate between a few pages of your site, you’ll notice that the plugin implements a gentle fade effect for the transition, creating a more graceful and visually engaging user experience. This is the default behavior not only for the plugin, but also for the View Transitions API in the browser.

If you want to see a live demo – you’re on it! The plugin is active on my site, so for example you could click on the “Blog” link in the header navigation. You should see a smooth transition if your browser supports it (see further below). Just make sure to navigate back here afterwards to continue reading. 😁

(If you want to test it more, you could navigate to the home page by clicking on the site title, scroll down to “Latest posts”, then click on the “View post” button for this post. When using a large enough viewport, that transition should expand/morph the small featured image from the post in the grid to the much larger featured image shown above. If the animation is too fast, try clicking the Back/Forward button in your browser a few times to get a better sense of what I’m referring to.)

Because the nature and style of transitions can be heavily dependent on a theme’s specific layout and design, the long-term vision is for themes to opt in and customize this behavior. This is facilitated through the WordPress theme support API, for instance by calling add_theme_support( 'view-transitions' ).

For now, since this plugin’s explicit purpose is to enable and showcase view transitions, it automatically enables them across your site, regardless of the theme currently in use.

Customizing View Transitions

For this initial experimental phase, the plugin offers a user-friendly way to explore different configurations directly within the WordPress admin. You’ll find settings under Settings > Reading that allow you to tweak the view transitions behavior. This UI is primarily for easy exploration and testing at this early stage. Should view transitions make their way into Core, customization would solely be managed through code via the theme support API. That said, even with this early plugin version, themes can already start using the theme support API.

Customizing with add_theme_support()

To quickly enable view transitions with standard settings, add the following to your theme’s functions.php file (typically within the after_setup_theme action hook):

function mytheme_setup() {
	add_theme_support( 'view-transitions' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Code language: PHP (php)

For more control, you can pass an array of arguments to add_theme_support( 'view-transitions', $args ). Here are the available arguments:

• default-animation: Specifies the default animation style for transitions.
• post-selector: CSS selector(s) to identify individual post containers, crucial for applying post-specific transitions from archive/listing pages.
• global-transition-names: A map (associative array) defining CSS selectors for global elements (like headers or sidebars) and their view transition names that should have persistent view-transition-name values across the entire site.
• post-transition-names: A map (associative array) defining CSS selectors for elements within post containers (like titles or featured images) and their view transition names that should animate during transitions to/from single views.

To provide additional context on what the view transition names are for: Whenever an element has the same view transition name assigned between two URLs that the user navigates between, it will gently morph as part of the transition, maintaining a clear association. For example, a post title in a grid of posts in an archive might scale up in size and move to the top of the page when navigating to its single post URL.

For the default-animation, a few animations are available by default. Additionally, the plugin provides an API to register additional animations, each of which encompasses a unique identifier, some configuration values, a CSS stylesheet, and optional aliases. I’m not going to cover this here for now since it’s a more advanced integration, but ideally in the long term there could be plugins or themes that register their own view transition animations that themes could use. For now, a few basic animations are available out of the box, mostly as an example of what can be done. The initial supported identifiers (and their aliases) are:

• fade
• slide
  • slide-from-right
  • slide-from-bottom
  • slide-from-left
  • slide-from-top
• swipe
  • swipe-from-right
  • swipe-from-bottom
  • swipe-from-left
  • swipe-from-top
• wipe
  • wipe-from-right
  • wipe-from-bottom
  • wipe-from-left
  • wipe-from-top

You can customize any or all of the supported arguments by passing an array to add_theme_support(). Here’s an example modifying all available options:

function mytheme_custom_view_transitions_setup() {
	add_theme_support( 'view-transitions', array(
		'default-animation'       => 'wipe-from-right',
		'post-selector'           => '.wp-block-post.post, article.post, article.entry',
		'global-transition-names' => array(
			'.site-branding' => 'logo',
			'.site-header'   => 'header',
        	),
        	'post-transition-names'   => array(
			// These are mostly just the defaults, but there's one extra entry.
			'.wp-block-post-title, .entry-title'     => 'post-title',
			'.wp-post-image'                         => 'post-thumbnail',
			'.wp-block-post-content, .entry-content' => 'post-content',
			'.post-meta'                             => 'post-meta', // Additional entry.
		),
	) );
}
add_action( 'after_setup_theme', 'mytheme_custom_view_transitions_setup' );Code language: PHP (php)

As you can see in this example, which also indicates some of the default values, they aim to capture common patterns that work across block themes and classic themes alike. That said, block themes are likely a perfect fit for view transitions, given their more predictable nature in markup due to using exclusively blocks.

The default values for all the supported arguments are based partly on WordPress-generated classes that should almost always be included in WordPress sites, and partly on very common conventions. The goal is that the defaults should work well for the majority of WordPress sites. That said, it is impossible to make it look perfect for every possible WordPress theme. That’s precisely why the theme support approach was chosen for making View Transitions available in WordPress.

Customizing via Settings > Reading

A limited subset of what can be customized via add_theme_support is made available via the “View Transitions” settings section under Settings > Reading.

You can customize the default animation, and the selectors for the default view transition names for both global and post-specific elements. While this means the customization options are limited via the UI, it still allows you to play around with different configurations via UI, and likely for the majority of sites these are the most relevant parameters to customize anyways. Keep in mind that this UI is only supplemental, and it only exists for easy exploration in the plugin. The recommended way to customize is via add_theme_support in your site’s WordPress theme.

A Note on Configuration Precedence

It’s important to be mindful that, for now, any configurations you make via the Settings UI will take precedence over what is defined in your theme’s code using add_theme_support(). This is something to keep in mind as you test and explore the plugin.

Browser Support

Cross-document view transitions are currently supported in a range of modern browsers, including Chrome, Edge, and Safari. For users on browsers that do not yet support this API, there should be no adverse effects; they will simply experience the traditional hard transitions between pages. You can always check the latest browser compatibility at caniuse.com.

Your Feedback is Needed!

If you’re a WordPress theme developer or maintainer, I strongly encourage you to install the View Transitions plugin and give it a spin. Better yet, consider experimenting with adding support directly into your theme using add_theme_support( 'view-transitions' ).

And if you’re simply curious about the feature and want to enable it on your WordPress site, I similarly encourage you to try out the plugin. The Core Performance Team would love to get your feedback.

While this is a fresh first release and still experimental, like other plugins incubated within the Performance Lab program, it holds the potential to one day become a part of WordPress Core.

Your early feedback and real-world use cases will be absolutely instrumental in refining this feature, addressing potential issues, and shaping its future.

Join Us at WordCamp Europe 2025 Contributor Day!

I’m publishing this post in a very timely manner – today is WordCamp Europe 2025 Contributor Day! I’ll be at the Core Performance Team table, and a key part of our agenda will be testing, discussing, and gathering feedback on this new View Transitions plugin.

If you’re attending and are curious to learn more, want to get involved, or have initial thoughts to share, I would love for you to join us. Your insights will be invaluable!

Feedback and Contributions

As this plugin is in its early stages, your feedback is highly encouraged and deeply appreciated.

• If you have suggestions, ideas for new features, or encounter any bugs, please submit them as an issue in the WordPress Core Performance Team’s GitHub repository.
• If you need help with troubleshooting or have questions about the plugin, please create a new topic on our support forum.

And of course, contributions are always welcome! You can learn more about how to get involved by checking out the Core Performance Team Handbook.

I’m really excited to see how the community uses and shapes this new feature!