Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Yoooo CSS view transitions are incredible! This is like 100 lines. Wild. 🤯

devongovett's profile picture

Devon Govett

41,794 subscribers

120,824 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Devon Govett profil fotoğrafı
Devon Govett1 yıl önce

And yes, Toast is finally coming to React Aria Components soon! 😊

Devon Govett profil fotoğrafı
Devon Govett1 yıl önce

In the meantime, plz check out our latest release. We worked hard on it. 😄

SecurityPal profil fotoğrafı
SecurityPal2 yıl önce

“When something breaks, be transparent, own it, fix it. And it's really about how you respond to it.” @WilHarm3 (@craft_ventures) emphasizes the importance of transparency and responsiveness when things go wrong. Watch the episode here:

Jarrod Payne profil fotoğrafı
Jarrod Payne1 yıl önce

Mind sharing the code?! Looks really nice.

NullVoxPopuli profil fotoğrafı
NullVoxPopuli1 yıl önce

Code or it didn't happen

phatg profil fotoğrafı
phatg1 yıl önce

wow, could you share the codesandbox link?

Wilson Hou profil fotoğrafı
Wilson Hou1 yıl önce

woahhhhh....... still not interruptible though right?

Alex Vechy profil fotoğrafı
Alex Vechy1 yıl önce

it only takes some time to actually understand what's going on with view transitions

Phil Wolstenholme @wolstenhol.me profil fotoğrafı
Phil Wolstenholme @wolstenhol.me1 yıl önce

Oooh are you playing around with the experimental React helper for them, or managing all the view-transition-names etc yourself for this demo?

Devon Govett profil fotoğrafı
Devon Govett1 yıl önce

Just native APIs here

Artur Bień profil fotoğrafı
Artur Bień1 yıl önce

Damn

Benzer Videolar

🤯 Just 4 lines of CSS View Transitions are great for changing pages BUT it's incredible for animating any changes to the DOM
3:51

🤯 Just 4 lines of CSS View Transitions are great for changing pages BUT it's incredible for animating any changes to the DOM

Wes Bos

149,041 görüntüleme • 1 yıl önce

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →
1:24

View Transitions just learned how to multitask with the rest of the page. Scoped View Transitions let you run multiple, fluid transitions at the same time, all with just a few lines of CSS. Web UX, re-imagined →

Chrome for Developers

114,560 görüntüleme • 8 ay önce

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯
0:29

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

Devon Govett

98,021 görüntüleme • 2 yıl önce

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle
0:20

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

80,298 görüntüleme • 2 yıl önce

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀
0:20

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀

jhey ʕ•ᴥ•ʔ

142,262 görüntüleme • 2 yıl önce

View Transitions with CSS linear() to create a light flicker effect 💡
0:35

View Transitions with CSS linear() to create a light flicker effect 💡

jhey ʕ•ᴥ•ʔ

271,221 görüntüleme • 2 yıl önce

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳
0:32

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳

jhey ʕ•ᴥ•ʔ

13,147 görüntüleme • 2 ay önce

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!
0:27

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

Adam Argyle

351,645 görüntüleme • 3 yıl önce

Crea animaciones entre páginas con 5 líneas de código. Te presento las View Transitions de CSS:
1:10

Crea animaciones entre páginas con 5 líneas de código. Te presento las View Transitions de CSS:

Miguel Ángel Durán

33,924 görüntüleme • 1 yıl önce

This is wild. Udio just dropped and it's like Sora for music. The music are insane quality, 100% AI. 🤯 1. "Dune the Broadway Musical"
0:32

This is wild. Udio just dropped and it's like Sora for music. The music are insane quality, 100% AI. 🤯 1. "Dune the Broadway Musical"

Min Choi

1,942,654 görüntüleme • 2 yıl önce

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

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

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare
0:48

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

Adam Argyle

128,376 görüntüleme • 2 yıl önce

100 transitions by Maryna Molchanova 🤯
1:01

100 transitions by Maryna Molchanova 🤯

Interesting As Fuck

26,533 görüntüleme • 1 yıl önce

CSS transitions made this feel 10x better. no jank. just smooth. Luke
0:38

CSS transitions made this feel 10x better. no jank. just smooth. Luke

Ali Grids

48,793 görüntüleme • 3 ay önce

dark side of the theme △🌈 – one set of CSS @​keyframes – scoped properties – perspective() for 3D transform – document.startViewTransition(switchTheme) view transitions are the gift that keeps on giving 🎁
0:24

dark side of the theme △🌈 – one set of CSS @​keyframes – scoped properties – perspective() for 3D transform – document.startViewTransition(switchTheme) view transitions are the gift that keeps on giving 🎁

jhey ʕ•ᴥ•ʔ

55,268 görüntüleme • 1 yıl önce

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇
0:38

Use CSS View Transitions for progressively enhanced theme-switching 😎 ::view-transition-new(root) { animation: reveal; clip-path: inset(0 0 0 0); } keyframes reveal {0% { clip-path: inset(100% 0 0 0);}} Can even scrub/debug with DevTools 👇

jhey ʕ•ᴥ•ʔ

79,964 görüntüleme • 1 yıl önce

AI video generation is officially getting out of hand. The transitions in this are absolutely insane 🤯🔥
0:48

AI video generation is officially getting out of hand. The transitions in this are absolutely insane 🤯🔥

sosa

685,548 görüntüleme • 1 ay önce

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!
0:23

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

jhey ʕ•ᴥ•ʔ

72,045 görüntüleme • 7 ay önce