I was just Hoping for Better Native Page Transitions, and Bramus commented that Chrome is working on something. Looks like it has some fresh enthusiasm for it, as there is a brand new repo, and you can literally test it in Chrome Canary.
The repo is moved over here, and I love the name. “Shared elements” is clutch here. It’s not just like a slide-out, slide-in, or a star wipe, it’s being able to move individual elements to new places. Shawn pointed out that Sarah’s article makes this ability super clear:
I’ll drop the code snippet from the current README here as its really cool:
function handleTransition() {
document.documentTransition.prepare({
rootTransition: "reveal-left",
duration: 300,
sharedElements: [e1, e2, e3]
}).then(() => {
doCustomThings();
document.documentTransition.start({ sharedElements: [newE1, newE2, newE3] }).then(
() => console.log("transition finished"));
});
}You don’t have to have sharedElements, but you can, and at the moment they all need contain: paint applied to them via CSS to work. Note that you don’t have to deal with updating the URL or anything, that would just automatically happen (I guess?) since this isn’t requiring single-page app architecture to work.
Weird History
While I was chatting about this, Alex Riviere pointed out to me that pre-Chromium Edge had (proprietary) page transitions:
<meta http-equiv="Page-Enter"
content="RevealTrans(Duration=0.600, Transition=6)">Whaaaat. Christian Schaefer has a post lamenting what we lost when we lost Trident:
As the name implies, such a filter would smoothly transition the user from page to page upon navigation, instead of having pages appear as abruptly as we are used to. There was an extensive list of transition filters you could choose from by referencing them via number:
Wipe up, wipe down, random dissolve, split horizontal out, etc. No star wipes though, incredibly. And definitely no “shared element transitions”
very cool. I like the way reveal JS handles shared element transitions declaratively https://revealjs.com/auto-animate/, but maybe the imperative way of this API gives more control?
I really like the idea that this might be built into the browser – I’d be right on it if were well supported! I also enjoyed this vue plugin https://github.com/justintaddei/v-shared-element that does pretty good job genericising the FLIP animations and performing them based on routing, though sometimes it cheats and just fades one element out and the other in if it can’t find a way to morph them. Still, it’s the most usable generic FLIP library I have come across.
For me, it seems FLIP from GSAP is more versatile. What could be the advantages of Shared Element over FLIP?
https://greensock.com/docs/v3/Plugins/Flip/
FLIP is about moving things around yes, but doesn’t have anything to do with literally moving URLs on a website from one to another. Looks like this API is such that you could use a technology like FLIP though to do the movement if you wanted.
Ah, that’s true. Thanks for pointing it out.
I assume that by not having until now some general way to style the transitions between pages was because of two reasons:
One is that you cannot control an external website (obviously, you could try to sweeten the exit from your page but the loading of the external page would still be abrupt, fact that destroys the entire navigation experience – making it even worse than with no transition styling at all).
Second one probably regards the security of the web in its entirety. Imagine what could happen if you can’t clearly see the fact that you leave a page and reach into a spoofed one. In a native Android app this is not an issue as time as you’re anyways in your own device and probably it’s a lot harder for anyone to destroy to a such extent your installed app as to make it to redirect you to a hacked website.
Despite of the gorgeous aspect of such front end stunts, they were deliberately kept outside of the web recommendations by the big guys because the internet must be safe not only just beautiful, even if our users would love to see it implemented (and us, too) as earlier as possible.
For what it worth, Page Transitions in Trident were introduced in IE4 in 1997: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532847(v=vs.85).
Almost 25 years ago. :)