Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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!

addyosmani's profile picture

Addy Osmani

406,023 subscribers

184,175 görüntüleme • 3 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Ahmad Awais profil fotoğrafı
Ahmad Awais3 yıl önce

I loved playing around with that. ☝️

Addy Osmani profil fotoğrafı
Addy Osmani3 yıl önce

Awesome to hear! 🙏

🧗‍♂️ Matt Holt profil fotoğrafı
🧗‍♂️ Matt Holt3 yıl önce

Dang, this is so cool.

Addy Osmani profil fotoğrafı
Addy Osmani3 yıl önce

🙏 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 Toh profil fotoğrafı
Edwin Toh3 yıl önce

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

Addy Osmani profil fotoğrafı
Addy Osmani3 yıl önce

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

James Q Quick profil fotoğrafı
James Q Quick3 yıl önce

ughhh so nice!

Addy Osmani profil fotoğrafı
Addy Osmani3 yıl önce

Can't wait to see what folks build!

Jean-Michel Saulnier profil fotoğrafı
Jean-Michel Saulnier3 yıl önce

and with SvelteKit as well :) @Rich_Harris

Nate Kohari profil fotoğrafı
Nate Kohari3 yıl önce

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 Osmani profil fotoğrafı
Addy Osmani3 yıl önce

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 ☺️

Benzer Videolar

The Chrome DevTools Animations inspector is a favorite. Modify timing, delays and durations. Great for working with CSS Animations & View Transitions.
0:40

The Chrome DevTools Animations inspector is a favorite. Modify timing, delays and durations. Great for working with CSS Animations & View Transitions.

Addy Osmani

33,959 görüntüleme • 2 yıl önce

🚨 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 👇
53:52

🚨 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,560 görüntüleme • 1 yıl önce

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 😅
0:58

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,174 görüntüleme • 1 yıl önce

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 ✨
0:32

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,273 görüntüleme • 3 yıl önce

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!
0:25

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 görüntüleme • 1 yıl önce

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.
0:20

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,035 görüntüleme • 3 yıl önce

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 🦋:
0:28

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,414 görüntüleme • 11 ay önce

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🇩🇪
1:17

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

227,836 görüntüleme • 1 ay önce

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
0:51

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,499 görüntüleme • 3 yıl önce

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.
1:27

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

376,984 görüntüleme • 2 ay önce

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:
0:30

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 görüntüleme • 2 yıl önce

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.
2:38

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,558 görüntüleme • 4 ay önce

The future of SpaceX and humanity is bright! “There have to be things that get you excited about the future, that make you glad to wake up in the morning, because you can’t wait to see what happens next. And that’s the future that SpaceX wants to bring to you.” - Elon Musk
0:27

The future of SpaceX and humanity is bright! “There have to be things that get you excited about the future, that make you glad to wake up in the morning, because you can’t wait to see what happens next. And that’s the future that SpaceX wants to bring to you.” - Elon Musk

Yvonne Sayers

15,561 görüntüleme • 2 ay önce

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 👇
0:28

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,805 görüntüleme • 2 yıl önce

Introducing Browser Agent in Julius. Starting today, Julius can go beyond just answering your questions, now it can spin up browser sessions and take actions across the web. We're excited to partner with Browserbase to bring this capability to our users. Browser agent in Julius is completely free this week
1:02

Introducing Browser Agent in Julius. Starting today, Julius can go beyond just answering your questions, now it can spin up browser sessions and take actions across the web. We're excited to partner with Browserbase to bring this capability to our users. Browser agent in Julius is completely free this week

Julius AI

13,086 görüntüleme • 1 ay önce

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 →
0:57

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 görüntüleme • 2 yıl önce

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.
4:53

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 görüntüleme • 2 yıl önce

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! 👇
0:38

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,157 görüntüleme • 3 yıl önce

excited about the what the new rookies bring to the table
0:28

excited about the what the new rookies bring to the table

Cleveland Browns

49,639 görüntüleme • 20 gün önce