Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

devongovett's profile picture

Devon Govett

42,192 subscribers

120,872 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Devon Govett
Devon Govettvor 1 Jahr

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

Profilbild von Devon Govett
Devon Govettvor 1 Jahr

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

Profilbild von SecurityPal
SecurityPalvor 2 Jahren

“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:

Profilbild von Jarrod Payne
Jarrod Paynevor 1 Jahr

Mind sharing the code?! Looks really nice.

Profilbild von NullVoxPopuli
NullVoxPopulivor 1 Jahr

Code or it didn't happen

Profilbild von phatg
phatgvor 1 Jahr

wow, could you share the codesandbox link?

Profilbild von Wilson Hou
Wilson Houvor 1 Jahr

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

Profilbild von Alex Vechy
Alex Vechyvor 1 Jahr

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

Profilbild von Phil Wolstenholme @wolstenhol.me
Phil Wolstenholme @wolstenhol.mevor 1 Jahr

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

Profilbild von Devon Govett
Devon Govettvor 1 Jahr

Just native APIs here

Profilbild von Artur Bień
Artur Bieńvor 1 Jahr

Damn

Ähnliche Videos

🤯 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,081 Aufrufe • vor 1 Jahr

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,634 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 2 Jahren

"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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Monaten

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,668 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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,668 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

#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,397 Aufrufe • vor 2 Jahren

100 transitions by Maryna Molchanova 🤯
1:01

100 transitions by Maryna Molchanova 🤯

Interesting As Fuck

26,533 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Monaten