Cross-fading DOM elements | HTTP 203
Ғылым және технология
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/ChromeDevs
Also, if you enjoyed this, you might like the HTTP203 podcast → goo.gle/HTTP203Podcast
#HTTP203 #ChromeDeveloper #WebDev
Пікірлер: 103
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.
@leoff2
2 жыл бұрын
Where will the podcasts be published?
@dassurma
2 жыл бұрын
@@leoff2 Take a look at the video description!
@jawbfl
2 жыл бұрын
Best of luck, 203 was amazing, thank you.
@BassByTheBay
2 жыл бұрын
I don't suppose you'd be willing to share _why_ you're leaving Google, would you? 😁
@albertodeagostini6143
2 жыл бұрын
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
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!
@Cookie_Wookie_7
2 жыл бұрын
100%
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
@HolgerNestmann
2 жыл бұрын
Surma will be missed by the community too. Looking forward to anything new podcast and new friends as well
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.
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.
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! 💗
happy and sad feeling are mixing in isolation. Thanks for this great series!
Sad to see Paul and now Sarma leaving, hope you continue with HTP203 it's my fav podcast and video show
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!
isolation: isolate is also used for isolating z-index.
"Don`t cry because it`s over, smile because it happened." I wish you all the best!
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!
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 ;)
best of luck Surma. And I hope that 203 will keep on going.
Man I am gonna miss this series.
@jakearchibald
2 жыл бұрын
It isn't the end of the series, just the end of Surma on the series 😢
Another goat episode!
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)
@Norfeldt
2 жыл бұрын
Where is he leaving to?
@datsteves
2 жыл бұрын
@@Norfeldt shopify
Jake: "Unmultiply." Surma: "You mean division?" My brain, in Travis Willingham's voice: "Reverse math!"
Hey can you both start a new independent podcast called HTTP 204 ? Just now that I found a substitute for Hello Internet...
@jan.melcher
2 жыл бұрын
HTTP 204 No Content But "So"?
@RichardRuffUK
2 жыл бұрын
Hi Tim!
@JimCullen
2 жыл бұрын
I had a dream the other night that there was more Hello Internet. It felt so real. Waking up was such a disappointment.
All the best to Surma. I love these series so much, you'll be missed.
Thanks for the amazing episodes! Good luck to you Surma.
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 :)
Best of luck Surma!!
A big yes for me on this! Unmultiply 🤣🤣
Goodspeed, Surma! HTTP 203 won't be the same without you.
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!
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. :)
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?
@nielskersic328
2 жыл бұрын
Paul is also leaving Google this week, so I wouldn't hold my breath
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 😭.
Nice ending! You'll be missed Surma. Weiterhin viel Erfolg!!
I have liked this series the most. Nice leave though, Surma :D
I think that isolation: isolate is used also to create new stacking contexts for z-index as well
Noooooo! :(
Jake, nice Salad Fingers reference there
Ah! another episode of two guys talking about things I don't quite understand.. my favorite.
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 😬
So... Surma is leaving Google?
@SebastianZartner
2 жыл бұрын
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!
@datsteves
2 жыл бұрын
@@SebastianZartner yep it is :) in feb (or so) he will be working at shopify
I miss you already Surma
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.
I’m going to miss you Surma!
Ship it!
Very interesting, so....
Will HTTP203 continue without Surma ?
@jakearchibald
2 жыл бұрын
Yep!
@Conrado0007
2 жыл бұрын
But it will never be the same :/
Damn, I'm gonna miss him
Thanks to all. Will miss Surma :( .. good luck in your future role 🍻
You will be missed Surma! 😿
what a sad day, hopefully Surma uses his personal yt channel
Jake, does this mean the show's going to be renamed HTTP 206? So long, Surma. All the best mate!
So
Isolation also z-index stuff
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.
@jakearchibald
2 жыл бұрын
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.
Oh man, it's so sad that Surma died, it's a rough start to the year. (Good luck and godspeed my friend!)
So.
Jake is our only constant…
Could this be done using text instead of images ?
@jakearchibald
2 жыл бұрын
The example is text 😀
@stannone7272
2 жыл бұрын
that should be possible for all DOM elements in the future
Oh no, the HTTP 203 curse :'(
Oh no... So...?
Just force Paul back to the show
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🤔
@jakearchibald
2 жыл бұрын
CSS is definitely about more than just color. It covers layout, interaction, animation, compositing and more
@hobbyturystaSEO
2 жыл бұрын
@@jakearchibald indeed but without colorS looks like Alpha-sort-of-channel-mono=chrom-ish
I feel like my parents have split up.
Oh....
Is Surma going somewhere? He is booted
Pair of so-and-sos…
😭😭
😯🥺
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.
@jakearchibald
2 жыл бұрын
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
@Pfoffie
2 жыл бұрын
sad 😞 still hoping for more http 203 - it’s the only reason subscribed to this channel haha