{"id":2122,"date":"2025-06-04T21:09:09","date_gmt":"2025-06-05T04:09:09","guid":{"rendered":"https:\/\/felix-arntz.me\/?p=2122"},"modified":"2025-06-04T21:09:09","modified_gmt":"2025-06-05T04:09:09","slug":"introducing-view-transitions-wordpress-plugin","status":"publish","type":"post","link":"https:\/\/felix-arntz.me\/blog\/introducing-view-transitions-wordpress-plugin\/","title":{"rendered":"Introducing the View Transitions Plugin for WordPress"},"content":{"rendered":"\n

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

View Transitions?<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Now, with cross-document view transitions<\/a>, 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<\/a> plugin makes it super simple in WordPress.<\/p>\n\n\n\n\n\n\n\n

How Do View Transitions Work in WordPress?<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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. \ud83d\ude01<\/p>\n\n\n\n

(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.)<\/p>\n\n\n\n

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' )<\/code>.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Customizing View Transitions<\/h2>\n\n\n\n

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<\/strong> 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.<\/p>\n\n\n\n

Customizing with add_theme_support()<\/code><\/h3>\n\n\n\n

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

function<\/span> mytheme_setup<\/span>()<\/span> <\/span>{\n\tadd_theme_support( 'view-transitions'<\/span> );\n}\nadd_action( 'after_setup_theme'<\/span>, 'mytheme_setup'<\/span> );<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
For more control, you can pass an array of arguments to add_theme_support( 'view-transitions', $args )<\/code>. Here are the available arguments:<\/p>\n\n\n\n