Bringing page transitions to the web

[@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

[@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.

[@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)

[@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

[@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?!

[@swyxTV]

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

[@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?

[@CoderOne]

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

[@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!

[@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

[@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

[@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

[@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.

[@TheNewton]

8:19 responsive fade and slide transitions are now called: The Archibald

[@xlayton3342]

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

[@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!

[@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

[@nikilragav]

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

[@Ali-sc6dh]

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

[@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!

[@dimitardimitrov4979]

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

[@Marie-ElisaBIAYS]

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

[@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 😍

[@ajaymenon0]

I had been waiting so long for this!!!

[@Drillan767]

9:42 Oh my gooood I dreamed of that for soooo loooong ! Finallyyyy!

[@karanshah838]

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

[@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.

[@mohamedchaabouni4477]

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

[@darvil82]

I am incredibly exited for this

[@B-max.]

This guy is a fantastic presenter.

[@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.

[@RamonBalthazar]

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

[@ZhiYin]

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

[@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.

[@zuperxtreme]

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

[@ViktorTy]

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

[@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)

[@mhombach3035]

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

[@tomtucjr]

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

[@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.

[@showmealldblueprints]

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

[@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

[@MCFedev]

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

[@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.

[@BrianLeRoux]

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

[@jakearchibald]

Printing this and mailing it to Paul

[@joshuafarayola6689]

This is crazy. I'm excited about it!

[@sjn_]

Wow, this is one hell of an amazing feature.

[@montebont]

Nice concept Jake - thanks for sharing !

[@b_two]

seeing jake without surma is absolutely heartrending

[@rasmuslaine4153]

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

[@_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!

[@albertodeagostini6143]

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

[@eliotshort9905]

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

[@ChrisJohnNewton]

Bravo for making something complex simple. Looks great!

[@kapeeshmanilal1613]

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

[@jasetify]

Amazing presentation of amazing new tech. I am excited!

[@thundernixon]

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

[@megadev3727]

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

[@zhanezar]

this is what ive wanted for so long so long

[@StellarWeb008]

One who got the idea to add this is a real god

[@knolljo]

Very exited about this feature! Great speaker too!

[@lunjie9510]

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

[@robinator18ps3]

This! This is exiting! This is exactly what is missing UX wise on the web!

[@oussamabouchebak6877]

This is looking quite awesome!

[@kisvegabor]

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

[@hrgwea]

Is there a way to control when the "incoming image" is captured? For example, a page with a lot of images may take quite some time to load, but the part of the page that's above the fold will load much faster and that's the only part that's needed in order to capture the incoming image.

[@mildmixchintu1717]

you can possibly use the Document.readyState property to determine if a web page is taking too long to load and override the transition if you may

[@TheNewton]

Right or if we can just set it to a static image. Such as from a dataset of prerendered screens across device types and browser combos.

[@hrgwea]

@@TheNewton That would defeat the purpose of a transition, which is to gradually transit to the actual next page and not a mock-up of the page.

[@AbdallaElmedny]

Super cool! Look forward to standardisation of this 👌

[@_abdul]

Navigation API will be brilliant. Can't wait to play with it.

[@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.

[@ManojKumar-op7ot]

This is a major change!

[@zshn]

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

[@allNicksAlreadyTaken]

What's the progress on standardizing this?

[@shinomitsu7798]

This is so good, I wanted this for so long

[@xQudo]

5:12 ah yes the start of "ToDo / to be fixed" comments in the code Love the attention to detail throughout the whole video, it's just something most apps lacks nowadays.

[@gauravrajghimire6396]

I am weeping with joy here.... What didn't I try... Gsap Anime js Animate.css Hover.css And nothing worked and i gave up... Finally i now have a hope of seeing the following Multiple elements of a dynamic SPA load with smooth and fluent animation that gives the page a sense of continuity... A sense of direction in the chaotic Internet.

[@robbiethomas3373]

This guy needs to do all of Google's announcements from now on. Excellent communication.

[@arifulislamleeton]

Thank you

[@Stringyyyy]

This is really revolutoinary!

[@mohhackz4167]

This is insane ! Mashallah ! I like how the web is evolving very fast year after year.

[@srsajjad7460]

This is a super demonstration of an exciting API

[@TDefton]

Omg my jaw hit the floor. I’m so excited for this to be out of canary 😍😍😍

[@ooogabooga5111]

beautiful , this might be the next curve on web

[@ashy7198]

Did I just see DGD on a google dev video. What the? Someone at google has legit music taste.

[@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

[@carannar]

This looks fantastic! Soooo much potential

[@piusijachi2763]

Give this man a channel

[@AndreaRiezzo]

The whole video: it's so interesting, looking forward to use the APIs at 9:43 ... whaaaaaaa I want them now!

[@mc-ty4br]

This looks amazing! ⭐️

[@JohnFarrellDev]

Really cool, hope it is supported well across browsers.

[@rameshsrivastavachandra]

This is so beautifully done 💖 THANKS JAKE

[@sivaranjansahu7427]

What a wonderful presenter!

[@MehdiEsfahani]

such a well put-together presentation

[@pablojavierjimenez]

"maybe is too much i'm not a designer just playing around with new toys" thats the better part 😂, as we say in argentina "te re bancamos jake" it mean "we really backup you jake"

[@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 💪

[@visormatt]

Very exciting, thanks for the demo 👏

[@Dominik-K]

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

[@Pfoffie]

Wow jake that is amazing 🤩

[@bluehugh2]

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