How to add the simplest View Transition to my site
I’ve never felt so powerful with so little. I’m spending time digging into the View Transitions API, a new-ish (and experimental) feature. Simply put, it creates the same sort of slick transitions between two pages (in a multi-page app, aka “website”) or views (in single-page app lingo) that native apps have enjoyed forever.
It’s more than that, of course. For example, it can transition an element on a page between an “old” state and a “new” state on the spot. It quite literally takes snapshots of each state and handles the work between them.
Anyway, CSS and JavaScript work nicely together, hand-in-hand, to make this happen. We register a transition name in JavaScript, apply it to an element in CSS, call the transition’s function when we need it, and fiddle with CSS @keyframes to customize the animation between the two states.
Or! Scrap all that and enjoy a simple crossfade between two pages by adding one more <meta> tag to your site’s <head>:
<meta name="view-transition" content="same-origin" />That’s, um… err… all there is! Any page on the same site with that tag in the document head gets the default crossfade transition right out of the box. No development. No spending hours minutes trying to find some missing semicolon as you struggle with a new feature.
How cool would it be to have a <meta> tag for other features like this?! I like looking at demos, of course, but it’s so different giving it a test drive on my own site. Feels like back in the day when we could rent video cassettes from a video store to play on a VCR. Take it home! Watch it! Bring it back! Only I don’t have to return this bad boy, nor rack up a small fortune in late fees.
Now my little WordPress site feels a little smoother moving between two pages… at least when I’m using Chrome. The Canary one. With a feature flag enabled. Turns out Chromium is all that supports the View Transitions API at the moment. And even then only Chrome Canary can handle the <meta> tag approach. ????♂️