Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

View Transitions bring seamless transition animations to the browser. Chrome is excited to see official support in Astro 3.0: ~ learn about the journey there!

Addy Osmani

391,893 subscribers

184,151 views • 2 years ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

11 Comments

Ahmad Awais2 years ago

I loved playing around with that. ☝️

Addy Osmani2 years ago

Awesome to hear! 🙏

🧗‍♂️ Matt Holt2 years ago

Dang, this is so cool.

Addy Osmani2 years ago

🙏 Genuinely stoked by all the work @matthewcp and team put into built-in support. @charca's View Transition demos here are in a class of their own 🤌

Edwin Toh2 years ago

I remember a time when coding these transitions were such a pain! Awesome launch!

Addy Osmani2 years ago

Thanks Edwin! Great work by @matthewcp and the team!

James Q Quick2 years ago

ughhh so nice!

Addy Osmani2 years ago

Can't wait to see what folks build!

Jean-Michel Saulnier2 years ago

and with SvelteKit as well :) @Rich_Harris

Nate Kohari2 years ago

It's been awhile since I've been jealous of a browser feature :D The transitions on are fun but this is so much cooler

Addy Osmani2 years ago

That is a nice transition! I’ve noticed a few folks using this as an opportunity to try enhancing their own page transition implementations with VT if there are shared elements ☺️

Related Videos

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅

Cyd Stumpel

10,167 views • 1 year ago

🚨 Perplexity's challenger to Chrome is here It's a powerful new agentic browser called Comet I talked to Perplexity's CEO Aravind Srinivas about what's new in Comet and was mind blown See the browser in action here 👇

🚨 Perplexity's challenger to Chrome is here It's a powerful new agentic browser called Comet I talked to Perplexity's CEO Aravind Srinivas about what's new in Comet and was mind blown See the browser in action here 👇

Zain Kahn

409,435 views • 11 months ago

A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning. With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨

A really cool feature of the View Transitions API (available now in stable Chrome!) is that videos and animations on the new view continue to play smoothly while transitioning. With a bit of extra JavaScript, you can even do this with elements shared across different routes ✨

Maxi Ferreira

351,241 views • 3 years ago

Like View Transitions? Astro Photo Gallery is a fresh View Transitions + Astro template by Maxi Ferreira and I. Try our demo & links on 🚀

Like View Transitions? Astro Photo Gallery is a fresh View Transitions + Astro template by Maxi Ferreira and I. Try our demo & links on 🚀

Addy Osmani

79,789 views • 2 years ago

Elevate the experience of your app with amazing transitions. Learn about the six common transition patterns here ➡️

Elevate the experience of your app with amazing transitions. Learn about the six common transition patterns here ➡️

Material Design

80,029 views • 3 years ago

Giving away 5 WL spots. Very Limited. All interactions considered 🤝 From utility to art - setting the standard in every way. Seamless transition from animations to PFPs. New Meta is here.

Giving away 5 WL spots. Very Limited. All interactions considered 🤝 From utility to art - setting the standard in every way. Seamless transition from animations to PFPs. New Meta is here.

Steady Stack

74,026 views • 3 years ago

This is super cool! 🔥 Powered by Transformers.js, GeoAI.js lets you run advanced GeoAI models 100% locally in your browser w/ seamless mapping integration! 🤗 I'm excited to see what the community builds with it. Congrats to sabman and the geobase team on the release!

This is super cool! 🔥 Powered by Transformers.js, GeoAI.js lets you run advanced GeoAI models 100% locally in your browser w/ seamless mapping integration! 🤗 I'm excited to see what the community builds with it. Congrats to sabman and the geobase team on the release!

Xenova

24,029 views • 10 months ago

If you thought we were done with View Transitions, guess again! Chrome is working on “Scoped View Transitions” which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent VTs and prevents layering issues. Thread on 🦋:

If you thought we were done with View Transitions, guess again! Chrome is working on “Scoped View Transitions” which allow you to scope a VT to a subtree of the DOM. This unlocks things like concurrent VTs and prevents layering issues. Thread on 🦋:

Bramus

23,371 views • 9 months ago

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it

Adam Argyle

469,407 views • 2 years ago

View Transition Types are newly baseline! These make it easier to build transitions that are specific to particular situations. Also, we have some new View Transition DevTools in Firefox 147…

View Transition Types are newly baseline! These make it easier to build transitions that are specific to particular situations. Also, we have some new View Transition DevTools in Firefox 147…

Firefox for Web Developers

15,394 views • 5 months ago

We love watching Freddy’s journey on his road trip across the U.S. There is no better way to learn about America’s story than from the open road, in our towns, and with the people! 🇺🇸 To Love America is to See America. Can’t wait to see where you are headed next Freddy🇩🇪

We love watching Freddy’s journey on his road trip across the U.S. There is no better way to learn about America’s story than from the open road, in our towns, and with the people! 🇺🇸 To Love America is to See America. Can’t wait to see where you are headed next Freddy🇩🇪

Secretary Sean Duffy

224,496 views • 6 days ago

Want to learn motion design? Don’t read. Explore. → Learn motion the fun way through real websites. Discover: • scroll animations • hover effects • transitions • interaction patterns Learn by playing.

Want to learn motion design? Don’t read. Explore. → Learn motion the fun way through real websites. Discover: • scroll animations • hover effects • transitions • interaction patterns Learn by playing.

Kailash

23,324 views • 2 months ago

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.

OpenAI Developers

372,702 views • 20 days ago

Calling all future #QuidditchChampions! Watch the Official Gameplay Walkthrough to learn what lies ahead on the pitch! Your journey begins September 3. View the full video here:

Calling all future #QuidditchChampions! Watch the Official Gameplay Walkthrough to learn what lies ahead on the pitch! Your journey begins September 3. View the full video here:

Harry Potter: Quidditch Champions

41,491 views • 1 year ago

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇

View Transitions now work almost perfectly in Safari Tech Preview. In this recording, you see a mobile view of What PWA Can Do Today to simulate what it would look like on iOS once support also lands there. The "flip" animation doesn't work as expected yet since the page is flipped in the wrong direction on a back navigation. Another issue is the scroll positions of the views when the page is not scrolled to the top. In Chrome this is taken care of by the "scroll" option of the Navigation API which is not yet functional in Safari TP. More details in the upcoming edition of Modern Web Weekly. Subscribe link 👇

Danny Moerkerke

38,803 views • 2 years ago

We've been partnering with Unity for Games to bring WebGPU to their engine, so their developers have everything they need to build immersive games in the browser. Learn more about WebGPU in Unity → Get started with WebGPU →

We've been partnering with Unity for Games to bring WebGPU to their engine, so their developers have everything they need to build immersive games in the browser. Learn more about WebGPU in Unity → Get started with WebGPU →

Chrome for Developers

18,190 views • 2 years ago

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

Future CSS && UI Tip! ⚡️ You could use View Transitions to create those word carousel-type effects 😍 span:nth-of-type(2) { view-transition-name: swap; } ::view-transition-old(swap) { animation-name: slide-down; } ::view-transition-new(swap) { animation-name: slide-up; } How To 1. Create a paragraph split into spans 2. Set an interval in JavaScript that swaps out the accent word 3. Set a view-transition-name on the accent word and the last span Then you've got a responsive word carousel with View Transitions 🤙 Words and inspiration from work louder®'s home page. Had to see if this API could do it and it ended up raising a bug for the web platform! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

230,088 views • 2 years ago

I joined the The World at One program to discuss the potential for transition to secular democracy in Iran and how Western governments can help bring about this change. It is time to support the Iranian people who are fighting for this change on the frontlines.

I joined the The World at One program to discuss the potential for transition to secular democracy in Iran and how Western governments can help bring about this change. It is time to support the Iranian people who are fighting for this change on the frontlines.

Reza Pahlavi

193,081 views • 2 years ago

Our kids deserve to learn how to read, not how to transition. There is NO place for gr*oming in South Carolina libraries. Hold the line. 💪

Our kids deserve to learn how to read, not how to transition. There is NO place for gr*oming in South Carolina libraries. Hold the line. 💪

Nancy Mace

23,341 views • 1 year ago

Added seamless camera transitions to the portals :) Seems like there might be some exposure related issues too ^^' (this rabbit hole...) #UE5

Added seamless camera transitions to the portals :) Seems like there might be some exposure related issues too ^^' (this rabbit hole...) #UE5

Amit Mehar

70,759 views • 1 year ago