Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 3 лет назад •via X (Twitter)

Наука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 11

Фото профиля Ahmad Awais
Ahmad Awais3 лет назад

I loved playing around with that. ☝️

Фото профиля Addy Osmani
Addy Osmani3 лет назад

Awesome to hear! 🙏

Фото профиля 🧗‍♂️ Matt Holt
🧗‍♂️ Matt Holt3 лет назад

Dang, this is so cool.

Фото профиля Addy Osmani
Addy Osmani3 лет назад

🙏 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
Edwin Toh3 лет назад

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

Фото профиля Addy Osmani
Addy Osmani3 лет назад

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

Фото профиля James Q Quick
James Q Quick3 лет назад

ughhh so nice!

Фото профиля Addy Osmani
Addy Osmani3 лет назад

Can't wait to see what folks build!

Фото профиля Jean-Michel Saulnier
Jean-Michel Saulnier3 лет назад

and with SvelteKit as well :) @Rich_Harris

Фото профиля Nate Kohari
Nate Kohari3 лет назад

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
Addy Osmani3 лет назад

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

Похожие видео

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 просмотров • 2 лет назад

🚨 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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 3 лет назад

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 просмотров • 1 год назад

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 просмотров • 11 месяцев назад

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,036 просмотров • 3 лет назад

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 просмотров • 1 месяц назад

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 просмотров • 3 лет назад

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 просмотров • 2 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 4 месяцев назад

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 просмотров • 2 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 1 месяц назад

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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 3 лет назад

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 просмотров • 21 дней назад