Cross-fading DOM elements | HTTP 203
Вставка
- Опубліковано 24 сер 2024
- Turns out it's impossible to cross-fade two DOM elements unless they're opaque. Here's why, and a new feature that could fix it.
Blog post version of this video → goo.gle/3eNzczZ
Alpha compositing → goo.gle/3mUHaLY
Shared element transitions → goo.gle/3FwtGNA
Mix-blend-mode → goo.gle/34bG1sU
The standard proposal → goo.gle/3eSHOW1
Isolation → goo.gle/3eURPli
More videos in the HTTP 203 series → goo.gle/HTTP203
Subscribe to Google Chrome Developers here → goo.gle/Chrome...
Also, if you enjoyed this, you might like the HTTP203 podcast → goo.gle/HTTP20...
#HTTP203 #ChromeDeveloper #WebDev
Thank you everyone for the kind comments. It means a lot. It’s easy to forget how many people were watching these shenanigans.
I’ll join Shopify in early February and I plan to continue doing the podcast with Jake. You should subscribe to it :3
Jake: Gonna miss ya, mate. 203 was one of my consistently favorite things to do.
Where will the podcasts be published?
@@leoff2 Take a look at the video description!
Best of luck, 203 was amazing, thank you.
I don't suppose you'd be willing to share _why_ you're leaving Google, would you? 😁
I hope the series continues to be as good as it was, but I don't think it will be easy to find a replacement.
Thanks for everything and best of luck with your new adventure
I'll miss you mate! We have a loose plan to carry on the podcast together (let's face it, the podcast was always loosely planned). As for the video series… I guess I'll have to make a new friend
Surma will be missed by the community too. Looking forward to anything new podcast and new friends as well
All the best in the future Surma! I really hope that this series continues in some kind! I learned so much from timing, memory leaks to colors! I often remember "that was in 203” and look it up again. Thank you very much!
100%
I wish you all the best for the future, Surma! The series was really great with you two.
Hope this keeps going, 203's conversational format is great for deep dives on web tech that would otherwise live in everyones backlog of oneday-i'll-learn-why-x.
And sometimes for other industries too like explanations in here are useful starting to demystify WHY pre-multiplication behaves like it does for SFX compositing software.
Gonna miss you, Surma! You and Jake's chemistry is a big reason I watch even the episodes on topics I already know. Good luck at Shopify! 💗
You guys have been an inspiration and I will miss the energy between you two. Thanks for all the episodes - I've learned a lot! And Surma: all the best to you.
Sad to see Paul and now Sarma leaving, hope you continue with HTP203 it's my fav podcast and video show
happy and sad feeling are mixing in isolation. Thanks for this great series!
This hit the feels, esp after seeing the tweet, I HAD to check if there was a farewell episode… aaand it’s there!😭
We hope you keep doing your best and bringing awesomeness to the web in your new role, Surma!
(P.S. here’s me hoping Surma will make surprise appearances in the future and looking forward to podcasts!)
(P.S.P.S. I’ll be selfish and ask Jake to pls never leave)
Where is he leaving to?
@@Norfeldt shopify
"Don`t cry because it`s over, smile because it happened." I wish you all the best!
isolation: isolate is also used for isolating z-index.
Hey can you both start a new independent podcast called HTTP 204 ? Just now that I found a substitute for Hello Internet...
HTTP 204 No Content But "So"?
Hi Tim!
I had a dream the other night that there was more Hello Internet. It felt so real. Waking up was such a disappointment.
Jake: "Unmultiply."
Surma: "You mean division?"
My brain, in Travis Willingham's voice: "Reverse math!"
Holy cow, that layering trick with CSS grid just blew my mind! I've been dealing A LOT with the issues that come up when using absolute positioning for this. Thank you! Really hope you keep this series going somehow ;)
Thank you both for THE BEST dev talk series that was bringing a lot of humor, knowledge and amusement.
I was always happy when I saw that new video was released because I knew that I will have a great time.
I will miss your duo together altho it is great to hear that you will contiunue your podcasts.
It will be hard to find a new person to not make this series stiff but I hope that Jake will find one.
I wish you all best Surma! Good luck in a new place, have fun and be health.
Thank you both for the great work!
Man I am gonna miss this series.
It isn't the end of the series, just the end of Surma on the series 😢
best of luck Surma. And I hope that 203 will keep on going.
I've used "isolation: isolate" in my react design system to create isolated complex component with multiple elements with different z-index. It's really helpful!
Surma, thanks for all that videos!
Jake, I'm hoping to see more of this show!
Another goat episode!
Noooooo! :(
A big yes for me on this!
Unmultiply 🤣🤣
All the best Surma! I also hope this series would keep on, as there's nothing else like that, and it'll be a great loss to have that discontinued. If not at Google, please go independent with Jake :)
This series is one those things that I admire Google for.
I wish you really the best for your future Surma!
Please don't go 😭.
I’ve done a ton of crossfading and I have these to say:
1. Grid overlaying is the ticket, intrinsic size is key and absolute positioning I have used with far too many hacks
2. I would’ve absolutely “shipped it” when Surma said so 😅
3. I feel like such an ant now, because I had a very foggy idea of what any of this meant, and as I said, I’ve done a ton of cross-fading 😬
Goodspeed, Surma! HTTP 203 won't be the same without you.
All the best! Will miss this video format of just Jake and Surma having a go at each other's patience. Hope you guys can atleast keep the podcast up. And not to sidetrack too far from Surma's farewell, do we, by any sheer stroke of luck, get Paul Lewis on this format?
Paul is also leaving Google this week, so I wouldn't hold my breath
All the best to Surma. I love these series so much, you'll be missed.
So... Surma is leaving Google?
Really, Surma?! That's very sad as I love those videos with you both! I still remember when we met at View Source in Amsterdam. If it's really true, I hope you'll do fine wherever you'll go!
@@SebastianZartner yep it is :) in feb (or so) he will be working at shopify
Well, I didn't expect that!
Good luck Surma!
For me, you were always kind of a representative of all web developers here in Germany 😁
Nevertheless I hope the 203 series will be continued!
Jake, nice Salad Fingers reference there
Ah! another episode of two guys talking about things I don't quite understand.. my favorite.
I miss you already Surma
I’m going to miss you Surma!
Will HTTP203 continue without Surma ?
Yep!
But it will never be the same :/
Best of luck Surma!!
I have liked this series the most. Nice leave though, Surma :D
I have tried to solve this problem in Flutter but it is a challenge there how to isolate blending two widgets together. I enjoyed listening to you diving into this problem. :)
Nice ending! You'll be missed Surma. Weiterhin viel Erfolg!!
Thanks to all.
Will miss Surma :( .. good luck in your future role 🍻
Thanks for the amazing episodes! Good luck to you Surma.
I think that isolation: isolate is used also to create new stacking contexts for z-index as well
You will be missed Surma! 😿
So
And after this morphing between dom elements, such as skeleton loaders reshaping to the text they are placeholding or when hydrating some area like turning a select into buttons.
Damn, I'm gonna miss him
Very interesting, so....
Oh man, it's so sad that Surma died, it's a rough start to the year.
(Good luck and godspeed my friend!)
So.
what a sad day, hopefully Surma uses his personal yt channel
Isolation also z-index stuff
Jake, does this mean the show's going to be renamed HTTP 206? So long, Surma. All the best mate!
Jake is our only constant…
I'm sad about Surma leaving but also because there was no mention of occlusion and emission, which is what opacity/alpha should be split into. Furthermore, 1 minus alpha isn't possible with HDR/WCG content because 1.0 / 255 isn't the maximum possible code value and inverting light intensity in a linear working space is ill-defined as far as I understand.
huh, as far as I know, alpha is independent of the space of the colour channels. Eg, if your colours are sRGB or rec2020, your alpha channel is still linear 0-1. What colour space does things differently? All implemented compositing operations definitely treat alpha as 0-1.
Ship it!
Just force Paul back to the show
Oh no, the HTTP 203 curse :'(
Oh no...
So...?
I feel like my parents have split up.
Is Surma going somewhere? He is booted
Pair of so-and-sos…
Oh....
Could this be done using text instead of images ?
The example is text 😀
that should be possible for all DOM elements in the future
Do you speak css? I speak so-so... Because I have seen only one color in fading in, I though css is about color not sort of monochromatic ish🤔
CSS is definitely about more than just color. It covers layout, interaction, animation, compositing and more
@@jakearchibald indeed but without colorS looks like Alpha-sort-of-channel-mono=chrom-ish
😭😭
lmao
Unmultiply 😂😂
😯🥺
There was a cross-fade function defined in CSS Images 4 at some point. It's still there in www.w3.org/TR/css-images-4/#cross-fade-function, though refers to Level 3, which doesn't define it. :-D Anyway, I think _that_ function should rather be used for cross-fading two elements instead of using opacity and mix-blend-mode. None-the-less, mix-blend-mode: lighter; might still be useful in some cases, though.
I mention that function in the episode. But it's only for images, so it could only work with element with an intermediate "to image" step, and that gets very complicated when it comes to clipping. The blend mode solution doesn't have these issues
So
sad 😞 still hoping for more http 203 - it’s the only reason subscribed to this channel haha