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:

Speaker: Jake Archibald

Watch more:

#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.

[SpaceChicken]

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

[dkennell]

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

[justsaying]

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?

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

[kylekashuba]

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

[swyxTV]

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

[leeboyin]

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!

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

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

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

[nielskersic]

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.

[xlayton]

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

[ironcito]

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!

[tomtucjr]

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

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

[Ali-scdh]

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

[dimitardimitrov]

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