Bringing page transitions to the web

Native apps often feature transitions between states that both look great and help communicate the type of navigation to the user. The bad news: creating transitions between pages on the web is impossible. In-page transitions are possible, but complex. The good news: new APIs are coming to simplify this process, building on top of CSS animations and the web animation API, and it works across navigations!
Resources:
Demo → goo.gle/3M55GV8 (requires document-transition and enable-experimental-web-platform-features flags)
Developer guide → goo.gle/38hsYIU
Full explainer → goo.gle/3yrbzrS
Codelab → goo.gle/39cXoMw
Speaker: Jake Archibald
Watch more:
All Google I/O 2022 Sessions → goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → goo.gle/IO22_Web
All Google I/O 2022 technical sessions → goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@jakearchibald]

In case you can't tell, I'm really excited about this feature, but I want to make sure we get it right. Please ask any questions you have, and I'll answer them here. Comments are also welcome on the repo linked in the description.

[@StuartLangridge]

The late, not-really-seen-by-anyone-else-as-great element allowed this sort of use (although the Page Transitions API is a lot more helpful about it than was, which mostly gave you the ability to build it yourself!), but the other thing that gave developers was access to both the before page and the after page at the same time. You could use portal.activate and pass data along with it which could be received by the next page, in essence giving a way to add arbitrary extra data to a page navigation. For an SPA you don't need this (because you're all one page), but it's hard for normal websites with more than one page, and portal helped with that. (The hacky ways to do it, like sticking things in the query string or localStorage, aren't as nice, and you can't postMessage from before to after because before and after aren't both present at the same time). Is there anything that the Page Transitions (or maybe the page navigation?) API does to help with that? (this stuff is super duper cool, btw.)

[@jakearchibald]

@@StuartLangridge isn't dead, it's just resting. No, seriously, it isn't dead, it's still being thought of for that page-in-page stuff. It was delayed by the infrastructure work needed for putting a 'top level' frame within another page, which is needed for portals but also prerender.

[@Rachoszsky]

Thanks for the great video, Jake! It's not only exciting stuff, but the presentation is also very well thought out (and funny ;-) Can you see this in action anywhere, e.g. using Chrome Canary for Android? (Not sure if I missed something)

[@jakearchibald]

@@Rachoszsky yep, see the description for links! Particularly the developer guide

[@Rachoszsky]

@@jakearchibald Thanks! Awesome to see this in action, one step closer to that native app feeling 👍🏼

[@SpaceChicken]

This is amazing. Excited to be able to use it in PWAs, and get that much closer to native feel.

[@beepbitfutures]

god i miss your videos

[@kylekashuba3219]

Can't wait to use this in 4 years when Apple implements it in Safari!

[@sillvvasensei]

The beauty is that you can implement the feature right away, using a fallback for browsers that don't support the feature, and then simply wait until they all support it.

[@DanKantor]

@@sillvvasensei absolutely. But iOS users not experiencing these lovely transitions is a large chunk of your intended audience I’m sure.

[@kylekashuba3219]

@@sillvvasensei This is true, however I'd be worried about maintenance. Whenever we want to add or change a new transition, we would have to do it twice in different ways if we want to have similar experiences.

[@remfur750]

Imo at this point you aren't making a series of webpages, you're making web apps. I feel like the idea of these relatively complex applications being treated as web pages is an archaic and limiting abstraction that sort of limits what the web can be. This is oddly coming from someone who dislikes web apps, so I'm not just hating on web-based progress.

[@guyunknown9123]

XD lmao

[@dkennell998]

Lovely!! Been thinking a lot about page transitions recently, so the timing here is perfect. This is a great intro to the new APIs

[@insaneviruss]

This is gonna be big! 9:43 is when my heart was literally jumping with joy like a small kid! I've been waiting for this for years. Please make this main stream soon. This has so much potential.

[@RamonBalthazar]

hahahah same 100%

[@REAZNx]

Have you never heard of Framer Motion before?

[@PanosPitsi]

@@REAZNx you are so smart lets ship 5mb of js to the client to make a buggy mess from 2007. Also it needs react on top so it doesnt work with better frameworks like sveltekit.

[@REAZNx]

@@PanosPitsi Framer is 4kb but ok.

[@justsaying4471]

Wow, this is cool. I like the simplicity of the api. That’s its real strength, I believe. Any news on whether other browsers will support it as well?

[@jakearchibald]

We've presented parts to the CSS working group, and folks have been supportive. But we don't have a real spec yet, so it's too early to ask other browsers to commit.

[@mathe42]

Even If this only lands in Chrome I will use it!

[@justsaying4471]

@@mathe42 absolutely. Me too. I like how easy the fallback is, as well. However, I think it won’t be widely used until the feature is adopted in the big frameworks, Angular, Vue, Nextjs, etc. And for that the api needs to be somewhat stable and widespread.

[@tusharsnn]

@@justsaying4471 i think it will be adapted very quickly as animation libraries uses the same pattern already for this type of page transistion. eg framer motion.

[@_HMCB_]

Man I love this. Until other browsers adopt it, I can see creating scenario-specific web apps for kiosks and such. Just awesome. Is Canary available on iPadOS?!

[@leeboyin945]

Brilliant! This is one of the most exciting topics for me in I/O 2022. It must have taken tons of hard work to make it look as simple as a breeze. Thanks for making web better!

[@swyxTV]

We love you Jake! You're incredible and thanks to the team for all the work on this api!

[@CodingPhase]

Finally lol it only took 10+ years but finally we here!!! This has been one of those features I've always wanted. 1. browser transitions (check) 2. css variables (check) 3. nested css (on hold)

[@PatricioHondagneuRoig]

I'd love for this to be discussed with other vendors and added as a cross-browser standard. Great job guys, it looks amazing.

[@zamfofex]

Isn’t that exactly what was done?

[@ciberman]

This is amazing and the API is extremely clever. Currently making animations in SPA is extremely difficult. And the cleverness of this API makes it even possible to work in traditional multi page apps and this makes me even more exited because I'm mainly a backend dev

[@CoderOne]

I absolutely love this feature and the simplicity behind it! Looking forward to try it out

[@ironcito1101]

Very cool! I implemented page transitions using JavaScript and CSS and it was pretty complex. I had to pre-load the content in the background, create the layout out of view, and then do the choreography. The "zoom in" transitions as seen at 9:40 are especially tough. This is a much simpler and more elegant solution. I hope that you make it generally available soon, and that other browsers follow suit. Good work!

[@nielskersic328]

This is so exciting. Probably my biggest wish for the future of the web. I'm really happy to see all the changes since v1 last year.

[@xlayton3342]

This is awesome! I really hope this gets widely adopted so we can use it across browsers. That'd be a dream!

[@james-innes]

Love this guys mannerisms, feels so candid and authentic not like a scripted advert or kids TV show like some Google dev vids

[@BenHewart]

I have been waiting ages for page transitions for web apps at last I can't wait to get my hands on it. Thanks guys!

[@tomtucjr]

This is SO cool. Amazing work from the whole team. Looks super easy to set up.

[@dimitardimitrov4979]

Nice! Good job to the team! Also impeccable presentation Jake! :)

[@RamonBalthazar]

This is the most exciting thing I've seen coming to the web in years!!! Thank you and congratulations 👏👏

[@Ali-sc6dh]

The API seems so simple and well designed ! Can't wait to start poking at it !

[@TheOtherMattPerry]

This looks great! Being able to encapsulate targets as images will make things a lot more supportive. How does it combine with WAAPI or other JS animations? It would be great to target this stuff with spring animations, independent x/y transitions etc.

[@KangJangkrik]

CSS animation is independent except via class name, I don't think that would be easy

[@ajaymenon0]

I had been waiting so long for this!!!

[@ZhiYin]

So extremely cool, I have no word for it. Btw the production quality of this video is through the roof

[@linkcell]

Thank you. I've been a vanilla html+js+css type of person because I didn't want to add the project complexity and learning required for anything extra. When this becomes standard, it will have proved that it was worth the wait.

[@AlexanderTrefz]

I was skeptical, as I have built most of those transitions animations myself in various Apps, which is really not fun. This looks like a well thought out and flexible API - thats awesome!

[@eliotshort9905]

This is crystal clear stuff - love the interactive examples, great work

[@showmealldblueprints]

Really really cool! Good to see some care with transitions.

[@nxte8506]

This is great. I’ve witnessed firsthand while writing react-motion-router how difficult this all is. It seems simple conceptually but when you layer desirable features on top of each other it starts falling apart and introduces weird edge cases. In my case I was animating the live DOM for each page (as I was unaware of a way to screenshot the current state) which wasn’t great. One question I have is why contain: paint?

[@dealloc]

From MDN: > The contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page, leading to obvious performance benefits. In case of these page-transitions it tells the browser to not need to paint the transitioning elements that are offscreen. In this case, elements which transition left and right outside the screen.

[@nxte8506]

@@dealloc thank you so much for the explanation.

[@knolljo]

Very exited about this feature! Great speaker too!

[@mathe42]

I think it would be great to define the root element so for example you have some div in your page and a transition can be created only for the content inside. The rest of the page would be interactive while the transition runs.

[@lazareric]

That's how this ought to have been done, but they are too comfy and a bit lazy at Google, i am sorry for being negative but it's true. If it was some people engineers grinding out there, with the power they have to implement such features, they would've made it properly.

[@mohamedchaabouni4477]

Man ! your talking skills are killing it ! just thank you for this 😁

[@joshuafarayola6689]

This is crazy. I'm excited about it!

[@lunjie9510]

It's really cool! I am excited to hear this news, what a big progress in web app experience!

[@darvil82]

I am incredibly exited for this

[@paales2]

This is genius! Have been working with @framer/motion with layout transitions and this is almost alike! Does this also enable on-page automatic FLIP animations that scales, resizes etc and automatically resolves the animation?

[@jakearchibald]

Right now it acts over the whole page, so it might not be appropriate for things when only happen in part of the page (but maybe it's fine in a lot of cases). There's already a github issue open to explore this where the effect is rooted to a smaller area of the page.

[@rijkvanwel]

@@jakearchibald that would be very helpful, e.g. in case the next “page” opens in a modal while the previous page stays visible in the background (example, opening a Trello card or photo from a gallery)

[@MCFedev]

Omg yeah, I really waited on this for a long time

[@AndaxH]

This is really exciting - I love that it reuses lots of existing web building blocks and APIs so you don't need to learn much new syntax and just use existing knowledge 😍

[@thundernixon]

This is fantastic! Love the thinking here and the control available in CSS. Can’t wait to embrace this in my websites!

[@montebont]

Nice concept Jake - thanks for sharing !

[@shinomitsu7798]

This is so good, I wanted this for so long

[@karanshah838]

Can't wait for designers to go crazy with page level animations now 🤩😍😀

[@ChrisJohnNewton]

Bravo for making something complex simple. Looks great!

[@mc-ty4br]

This looks amazing! ⭐️

[@JCake]

My absolute favourite element of all of this is a single word: Customisability. I live by this principle, and I'm glad to see I'm not alone

[@sjn_]

Wow, this is one hell of an amazing feature.

[@mhombach3035]

You guys at Google are absolute legends, wtf. Can't wait to play around with the new api ö_ö

[@zuperxtreme]

Love the flexibility of tagging things with CSS, cool stuff!

[@carannar]

This looks fantastic! Soooo much potential

[@megadev3727]

INSANE!! can't wait for it to roll out to the main build! Will totally give it a try ;)

[@kisvegabor]

Amazing video! It was a pleasure to listen your presentation. And great feature, of course!

[@artiepolanco]

Awesome. Can’t wait to try it out!

[@jasetify]

Amazing presentation of amazing new tech. I am excited!

[@AbdallaElmedny]

Super cool! Look forward to standardisation of this 👌

[@oussamabouchebak6877]

This is looking quite awesome!

[@user-gj5jp1cq2f]

So sad it's only coming now, but just as excited! Can't wait to be able to use it

[@visormatt]

Very exciting, thanks for the demo 👏

[@ViktorTy]

Now, this is what I need in web apps. I can't wait for this to come to regular chrome!

[@srsajjad7460]

This is a super demonstration of an exciting API

[@zshn]

Absolutely gorgeous! I did the screenshot thing but it will be great to have native API.

[@stefanogagliardi4665]

This concept of "Page transistion" reminded me of NextJs; as it has the "shared Layout" conectto which is not reloaded during navigation (eg. header and footer) and in which the pages are injected without reloading. Not having to reload allows you to apply page transitions.

[@MehdiEsfahani]

such a well put-together presentation

[@kapeeshmanilal1613]

Waiting patiently for this one! Its a good time to be a developer! Thanks to you and the team for this

[@bm2085]

This is cool! Thank you for making it!

[@rameshsrivastavachandra]

This is so beautifully done 💖 THANKS JAKE

[@dk0767]

Subtle transition animation greatly helps usability by providing informative visual queues, but when transition animations take too long to complete, they start to distract and create headaches. Human eyes will want to tack any movement. When the movement speed is above a certain threshold, our eyes will give up tracking during the the transition animation and then eventually snap on the final state of the animation when it stops. This is far better than a slow transition animation where our eyes try to track the whole animation and suffers disorientation and headaches and eye strains. More is not necessary better. A good UI animation should not attract attention to itself.

[@andrewtfluck]

This is sick. I love this!

[@MizManFryingP]

This looks really cool!

[@_va3y]

Wow, that's a really game changer for SPAs and SPA-type websites. Now let's all hope, it'll become implemented soon 🤞

[@EduardoLima-pi7fl]

Totally! I was wondering about using this API with PWA features and having the possibility to deploy to Google Store, this would make it possible to write SPAs that could become very convincing native apps!

[@themarksmith]

Excellent - looking forward to using this!

[@rasmuslaine4153]

Oh yeah, this is great. Simple and yet customisable. Powerful tool.

[@JDalmasca]

This is freaking magical! I love it!

[@michaelflores23]

Excited for this API

[@AdityaTripathi]

I can't wait for this!

[@kakschoen]

Such a lovely presentation

[@mmahgoub]

OMG Jake! That's amazing

[@markevans158]

Hi this is great thanks for this - really interesting. Would there be any scope for e.g. adding "named transitions", e.g. document.createDocumentTransition("forward"), or maybe passing some arbitrary metadata or something like that? The example you mentioned of forward = slide-left, backward = slide-right demonstrates why this might be useful. For context for my question below, I tend to think that animations are best thought of in two categories: - declarative, e.g. CSS transitions like "transition: opacity 2s" - imperative, i.e. javascript "do this" type of code, e.g. web animations api "myElement.animate({opacity: 0}, {duration: 2000})" Declarative style is easier/quicker to write and perfect if going from A --> B is always done in the same way (e.g. a fade or whatever) When getting from A --> B could be done in different ways (fade? slide? ...) depending on the state of the app, then imperative style might be needed The example you gave at the end of wanting: - forward to next page = slide left - backwards to previous page = slide right is a good example of where declarative style just doesn't cut it. You mentioned temporarily adding a class "back-transition" to the element (with the help of the navigation API to know when to do that) but I feel that really this is a bit of a hack to fit what's fundamentally an imperative thing ("do a transition but in a different way") into a declarative style (using CSS) Would it not be better to allow passing an optional name (or even other data) to createDocumentTransition, like document.createDocumentTransition("forward") which could then be targeted with css with something like ::page-transition-outgoing-image:forward(root) or something (with ::page-transition-outgoing-image(root) being the catch-all fallback) Also on the subject of imperative/declarative - would there be javascript hooks for doing the animation using the Animations API (or anything else promise-based) rather than in CSS? Thanks

[@VictorBrrrr]

That is just awesome! Can't wait to see that out. What about the page loading delay? I imagine this working smoothly with a loading under 2s, but if it's more, won't the animations be triggered a bit lately? Anyway, not sure, it's actually an issue as you still have the same loading time and just a cool animation to view the new page.

[@BrianLeRoux]

This is awesome and Jake is awesome give that man a raise

[@jakearchibald]

Printing this and mailing it to Paul

[@mehdinjfi]

This looks great!

[@EvoSchecter]

"I dont know, You could probably do something better." Now THIS is how you get people into it, An Instructor who has enough confidence to encourage the students.

[@peternicholson26]

I'm definitely going to be playing with this. Just launching my agencies new website and the page transitions from other Frameworks were a nightmare to mix in with smooth scrolling and gsap, so I left it for version 1.1. Something like this could be the future 💪

[@ManojKumar-op7ot]

This is a major change!

[@thegrantkennedy]

Im so excited for this

[@denisblablinskiy4552]

That is really cool! Looking forward to playing with it

[@zhanezar]

this is what ive wanted for so long so long

[@rand0mtv660]

This looks awesome! Couple of things that I'm curious about..You mentioned that this is a nice match to use with new Navigation API, so will these two be released together? If Navigation API is not available when this document transition API is released, how would one add right class name to achieve more tailored back/forward animations as you mentioned? Also, is there a chance that transition gets stuck (poor network or loss of connection)? How is that handled? Will page be non interactive because it's all converted into screenshots or is that screenshot phase not even started if destination route isn't loaded at all?

[@dear_saturn]

This is awesome, looks intuitive to use and easy to learn.

[@Dominik-K]

This is an amazing idea, and I'm looking forward to what can be achieved with this pattern

[@ooogabooga5111]

beautiful , this might be the next curve on web

[@nikilragav]

You're actually using a Joycon as a clicker? Glad to find other people doing that!

[@Tarodev]

This looks amazing!

[@broceedwin]

This is amazing! I can't wait to start experimenting with it 👍

[@user-mv4wc2gb5o]

I can't wait to use it in my product!

[@Pfoffie]

Wow jake that is amazing 🤩

[@albertodeagostini6143]

Oh boy, I'm waiting for something like this for so long

[@Stringyyyy]

This is really revolutoinary!

[@keharacek]

Damn, this looks pretty amazing! Hope this catches attention :O

[@bluehugh2]

Love the idea and simplicity. Just wondering if other browsers will support this

[@GavHern]

this is going to be huge!!