In August 2022, Google published a blog post talking about their new Shared Element Transition API. And boy, do they look neat.
Now unless you’re a web developer or just a switched-on tech god, Shared Element Transition API probably just sounds like a bunch of random words. And that’s okay (it kind of is).
Web developers are pretty smart and so they can make cool effects and transitions happen on the page when a user does something specific. Just check out Screaming Frog’s Our Story page. I think you’ll agree that it looks awesome.
Companies aiming to be at the cutting edge of web design have done this sort of thing for years, so why don’t more websites do it too? Well, first, it requires a decent amount of web design and development understanding (a resource some companies just don’t have). And second, it takes a lot of time to get right.
That’s where Google’s new Shared Element Transition API comes in. Where page effects and transitions could take dozens of lines of code, now, the same can be achieved in two. It saves a bunch of time, a lot of headaches, and is pretty simple to pull off.
From now on, I’m just going to call the Shared Element Transition API Google’s new web transitions – because that’s exactly what it is in human language (I don’t talk robot).
What does Google’s Shared Element Transition API look like?
While Google has shared a demo site where you can experiment with the transitions, they probably won’t work for you without some extra steps. That’s because it’s all currently going through feedback so it’s not enabled by default just yet. Think of it as being in Early Access.
If you don’t want to go through the steps of getting it working and just want to see the pretty moving pictures, here’s a video from Google themselves showing it off.
If you want to get it working on your system you’ll need to do two things.
- Be using the Chrome browser
- Enable the documentTransition API Chrome flag
That second step is more simple than it sounds. To enable the flag, just visit chrome://flags/ in your Chrome browser. It’ll come up with the “Experiments” page. Make sure you understand the Warnings here – fiddle with your Chrome flags at your own risk. Search for documentTransition API and change it to Enabled.
Here’s a GIF I made covering the process in case you need a hand.
And that’s it, you’re done!
If you check out Google’s demo site now, you’ll be able to see the smooth transitions when clicking on certain parts of the website.
Are Google’s new web transitions worth using?
This is the big question. But it’s also not an easy one to answer. You might think that the transitions look basic and probably aren’t worth the extra hassle. However, the important thing to note is how much easier it is to achieve these transitions now than it ever has been before.
What it achieves is not new per se, but it changes the way we approach web transitions in an equivalent manner to how streaming services changed the way we watch tv shows.
The other thing of note is that this is just the beginning and it enables creative web devs to go wild with their own web transitions to create some cool-looking sites.
I’m a sucker for pretty-looking animations and transitions, (my PowerPoint presentations will blow your socks off), so naturally, I’m looking forward to seeing how Google’s new web transitions change how we interact with websites. Will they have an effect on the future of web design? Absolutely. Are they a good thing? Maybe not…
How do Google’s new web transitions affect web accessibility?
When it comes to web accessibility, we’re all over it. It is a huge part of what we help our clients with after all. And so you’ll forgive me for it being the first thing I thought about when seeing these new web transitions.
I won’t go into detail about the basics of web accessibility and the Web Content Accessibility Guidelines (WCAG) here, otherwise, this blog will be a book. Luckily, we already wrote that book, so if you want a beginner’s guide to web accessibility you can download the eBook for free.
Some users with various disabilities may find animations, auto-playing videos, or gifs distracting or nauseating when navigating a website, which can cause them a lot of problems. That’s why WCAG 2.1 A has a success criterion called Pause, Stop, Hide that aims to alleviate the issues caused by moving, blinking, scrolling, or auto-updating information.
There’s a lot involved within the criterion so I’d recommend you have a read-through yourself if you’re interested. In short, you must provide a way for the user to pause, stop or hide any moving parts of your website that start automatically, are presented in parallel with other content, and last more than 5 seconds.
Most of the transitions seen in the Google example site are relatively quick and smooth (under 5 seconds), and we can imagine that this is likely to be the case across most websites. But because Google’s new web transitions are so easy to implement and customize, it opens the doors for less experienced web designers to create transitions that are highly inaccessible.
However, there is something you can do if you still want these sorts of transitions. A web manager or web developer can use the prefers-reduced-motion CSS media feature to prevent animations or transitions from being applied to elements on the page. This means that users who have their system set up to reduce motion won’t be adversely affected by moving parts on your website. It’s something you should look to implement anyway, even without wacky transitions across your website.
Back in the 2000s, I made my first website and boy did I think it was the coolest thing in the world. It had animated gifs of guitars on fire and autoplayed rock music when it loaded (yes I was a very edgy kid). Of course, it was objectively awful. But it makes me think about where websites could go with Google’s new web transitions.
All it takes is an inexperienced web designer thinking they are being innovative for us to see websites full of highly inaccessible and nauseating flashing transitions all over the place.
Should I use Google’s new web transitions?
Most people will agree that they look great and from the examples we’ve seen, they seem to work pretty well. It updates websites to act like native apps and I doubt anyone has a problem with that. But of course, it’s in its testing phase right now so until it’s part of Chrome by default there are going to be a lot of updates, bugs, and changes. So it makes sense to hold off for now. But if you plan to use Google’s Shared Element Transition API right now, I’d suggest you think about how it’ll affect the accessibility of your website.
I don’t have a crystal ball but still, it’s exciting to see new developments when it comes to the web. Websites have changed a huge amount over the years, and now with new features like Google’s new web transitions and AI tools like we’ve never seen before, it’ll be interesting to see what the future of the web holds in store.
