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

  • @dassurma
    @dassurma2 жыл бұрын

    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

    @leoff2

    2 жыл бұрын

    Where will the podcasts be published?

  • @dassurma

    @dassurma

    2 жыл бұрын

    @@leoff2 Take a look at the video description!

  • @jawbfl

    @jawbfl

    2 жыл бұрын

    Best of luck, 203 was amazing, thank you.

  • @BassByTheBay

    @BassByTheBay

    2 жыл бұрын

    I don't suppose you'd be willing to share _why_ you're leaving Google, would you? 😁

  • @albertodeagostini6143

    @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

  • @VonUndZuCaesar
    @VonUndZuCaesar2 жыл бұрын

    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

    @Cookie_Wookie_7

    2 жыл бұрын

    100%

  • @jakearchibald
    @jakearchibald2 жыл бұрын

    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

    @HolgerNestmann

    2 жыл бұрын

    Surma will be missed by the community too. Looking forward to anything new podcast and new friends as well

  • @jan.melcher
    @jan.melcher2 жыл бұрын

    I wish you all the best for the future, Surma! The series was really great with you two.

  • @TheNewton
    @TheNewton2 жыл бұрын

    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.

  • @stefanspittank
    @stefanspittank2 жыл бұрын

    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.

  • @IceMetalPunk
    @IceMetalPunk2 жыл бұрын

    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! 💗

  • @maxziebell4013
    @maxziebell40132 жыл бұрын

    happy and sad feeling are mixing in isolation. Thanks for this great series!

  • @mutebg
    @mutebg2 жыл бұрын

    Sad to see Paul and now Sarma leaving, hope you continue with HTP203 it's my fav podcast and video show

  • @hakier_
    @hakier_2 жыл бұрын

    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!

  • @MarcelRobitaille
    @MarcelRobitaille2 жыл бұрын

    isolation: isolate is also used for isolating z-index.

  • @aca48
    @aca482 жыл бұрын

    "Don`t cry because it`s over, smile because it happened." I wish you all the best!

  • @vitabramov89
    @vitabramov892 жыл бұрын

    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!

  • @APXmusic1
    @APXmusic12 жыл бұрын

    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 ;)

  • @riddixdan5572
    @riddixdan55722 жыл бұрын

    best of luck Surma. And I hope that 203 will keep on going.

  • @JonnyPowell
    @JonnyPowell2 жыл бұрын

    Man I am gonna miss this series.

  • @jakearchibald

    @jakearchibald

    2 жыл бұрын

    It isn't the end of the series, just the end of Surma on the series 😢

  • @chrizzzly_hh
    @chrizzzly_hh2 жыл бұрын

    Another goat episode!

  • @sangeeth96
    @sangeeth962 жыл бұрын

    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

    @Norfeldt

    2 жыл бұрын

    Where is he leaving to?

  • @datsteves

    @datsteves

    2 жыл бұрын

    @@Norfeldt shopify

  • @IceMetalPunk
    @IceMetalPunk2 жыл бұрын

    Jake: "Unmultiply." Surma: "You mean division?" My brain, in Travis Willingham's voice: "Reverse math!"

  • @pedroaugusto656
    @pedroaugusto6562 жыл бұрын

    Hey can you both start a new independent podcast called HTTP 204 ? Just now that I found a substitute for Hello Internet...

  • @jan.melcher

    @jan.melcher

    2 жыл бұрын

    HTTP 204 No Content But "So"?

  • @RichardRuffUK

    @RichardRuffUK

    2 жыл бұрын

    Hi Tim!

  • @JimCullen

    @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.

  • @ASDevelopersTutorials
    @ASDevelopersTutorials2 жыл бұрын

    All the best to Surma. I love these series so much, you'll be missed.

  • @askplays
    @askplays2 жыл бұрын

    Thanks for the amazing episodes! Good luck to you Surma.

  • @medikoo
    @medikoo2 жыл бұрын

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

  • @anubhav200
    @anubhav2002 жыл бұрын

    Best of luck Surma!!

  • @Stoney_Eagle
    @Stoney_Eagle2 жыл бұрын

    A big yes for me on this! Unmultiply 🤣🤣

  • @MaxArt2501
    @MaxArt25012 жыл бұрын

    Goodspeed, Surma! HTTP 203 won't be the same without you.

  • @alirahmani5601
    @alirahmani56012 жыл бұрын

    Well, I didn't expect that!

  • @JonasHabel1
    @JonasHabel12 жыл бұрын

    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!

  • @leiflinse2267
    @leiflinse22672 жыл бұрын

    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. :)

  • @rishabhanand4270
    @rishabhanand42702 жыл бұрын

    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

    @nielskersic328

    2 жыл бұрын

    Paul is also leaving Google this week, so I wouldn't hold my breath

  • @2802ize
    @2802ize2 жыл бұрын

    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 😭.

  • @nicodomino6713
    @nicodomino67132 жыл бұрын

    Nice ending! You'll be missed Surma. Weiterhin viel Erfolg!!

  • @be2wa
    @be2wa2 жыл бұрын

    I have liked this series the most. Nice leave though, Surma :D

  • @albertodeagostini6143
    @albertodeagostini61432 жыл бұрын

    I think that isolation: isolate is used also to create new stacking contexts for z-index as well

  • @TheTentacola
    @TheTentacola2 жыл бұрын

    Noooooo! :(

  • @Surefire99
    @Surefire992 жыл бұрын

    Jake, nice Salad Fingers reference there

  • @talhaakram
    @talhaakram2 жыл бұрын

    Ah! another episode of two guys talking about things I don't quite understand.. my favorite.

  • @dave6012
    @dave60122 жыл бұрын

    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 😬

  • @TheOlian04
    @TheOlian042 жыл бұрын

    So... Surma is leaving Google?

  • @SebastianZartner

    @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

    @datsteves

    2 жыл бұрын

    @@SebastianZartner yep it is :) in feb (or so) he will be working at shopify

  • @ColinRichardson
    @ColinRichardson2 жыл бұрын

    I miss you already Surma

  • @TheNewton
    @TheNewton2 жыл бұрын

    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.

  • @jurgentreep
    @jurgentreep2 жыл бұрын

    I’m going to miss you Surma!

  • @JacobCanote
    @JacobCanote2 жыл бұрын

    Ship it!

  • @firiasu
    @firiasu2 жыл бұрын

    Very interesting, so....

  • @jonathantreffler6641
    @jonathantreffler66412 жыл бұрын

    Will HTTP203 continue without Surma ?

  • @jakearchibald

    @jakearchibald

    2 жыл бұрын

    Yep!

  • @Conrado0007

    @Conrado0007

    2 жыл бұрын

    But it will never be the same :/

  • @dasten123
    @dasten1232 жыл бұрын

    Damn, I'm gonna miss him

  • @mc-ty4br
    @mc-ty4br2 жыл бұрын

    Thanks to all. Will miss Surma :( .. good luck in your future role 🍻

  • @wmhilton-old
    @wmhilton-old2 жыл бұрын

    You will be missed Surma! 😿

  • @cyber_chris
    @cyber_chris2 жыл бұрын

    what a sad day, hopefully Surma uses his personal yt channel

  • @brymstoner
    @brymstoner2 жыл бұрын

    Jake, does this mean the show's going to be renamed HTTP 206? So long, Surma. All the best mate!

  • @misode
    @misode2 жыл бұрын

    So

  • @TheUnknownFactor
    @TheUnknownFactor2 жыл бұрын

    Isolation also z-index stuff

  • @CoDEmanX47
    @CoDEmanX472 жыл бұрын

    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

    @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.

  • @SimonBuchanNz
    @SimonBuchanNz2 жыл бұрын

    Oh man, it's so sad that Surma died, it's a rough start to the year. (Good luck and godspeed my friend!)

  • @StephanBijzitter
    @StephanBijzitter2 жыл бұрын

    So.

  • @XiXora
    @XiXora2 жыл бұрын

    Jake is our only constant…

  • @loic.bertrand
    @loic.bertrand2 жыл бұрын

    Could this be done using text instead of images ?

  • @jakearchibald

    @jakearchibald

    2 жыл бұрын

    The example is text 😀

  • @stannone7272

    @stannone7272

    2 жыл бұрын

    that should be possible for all DOM elements in the future

  • @Scio_
    @Scio_2 жыл бұрын

    Oh no, the HTTP 203 curse :'(

  • @JacobCanote
    @JacobCanote2 жыл бұрын

    Oh no... So...?

  • @AlexSav
    @AlexSav2 жыл бұрын

    Just force Paul back to the show

  • @hobbyturystaSEO
    @hobbyturystaSEO2 жыл бұрын

    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

    @jakearchibald

    2 жыл бұрын

    CSS is definitely about more than just color. It covers layout, interaction, animation, compositing and more

  • @hobbyturystaSEO

    @hobbyturystaSEO

    2 жыл бұрын

    @@jakearchibald indeed but without colorS looks like Alpha-sort-of-channel-mono=chrom-ish

  • @fabiocroldan
    @fabiocroldan2 жыл бұрын

    I feel like my parents have split up.

  • @ZEDCWT
    @ZEDCWT2 жыл бұрын

    Oh....

  • @StupidLova
    @StupidLova2 жыл бұрын

    Is Surma going somewhere? He is booted

  • @martinleeuwangh
    @martinleeuwangh2 жыл бұрын

    Pair of so-and-sos…

  • @IAmSamuelCharpentier
    @IAmSamuelCharpentier2 жыл бұрын

    😭😭

  • @ShinigamiZone
    @ShinigamiZone2 жыл бұрын

    😯🥺

  • @roymond...stillalive385
    @roymond...stillalive3852 жыл бұрын

    lmao

  • @jenishngl
    @jenishngl2 жыл бұрын

    Unmultiply 😂😂

  • @SebastianZartner
    @SebastianZartner2 жыл бұрын

    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

    @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

  • @Pfoffie
    @Pfoffie2 жыл бұрын

    So

  • @Pfoffie

    @Pfoffie

    2 жыл бұрын

    sad 😞 still hoping for more http 203 - it’s the only reason subscribed to this channel haha

Келесі