*TLDW:* Pre-render your shadows on a pseudo element and animate it's opacity to improve performance. Chrome DevTools has a performance monitor tab where you can see the impact of your CSS design. Opacity and Transforms are MUCH cheaper to animate than position, shadow, etc... Bonus: Shadows are tied to their respective element's z-depth. Thanks for the content Kevin! That's actually a neat approach I hadn't thought of and I should really start looking at the performance monitor more when designing.
hi kevin, gr8 tip. thank you. one thing though, you need to set the pseudo element that is positioned absolutely to either z-index:-1 or pointer-events to none, otherwise you can not click on the links in the box. :)
I'm from South Africa and we currently have 'Loadshedding' (areas have their power turned off to cut back on power consumption because the power utility company is owned by the government and are a bunch of mizers) and I have just sat for 2 hour, in the dark, going through all your videos. The explanations are clear and you have some really great tips and tricks! Keep up the great work! Really enjoying this content!
I remember trying to animate buttons and shadows to make a hover effect and everything was slow as a turtle, and I didn't understand why xD Good to learn how I can surpass these problems, thanks as always, Kevin!
Wow that's my geek-o-meter fill for the morning!! That was crazily interesting, I will be utilising the dev tools much more from now on - cheers Kevin!
Do you have any tips for the jittery text inside the boxes that have transform animated? Thanks for the tip on the box-shadows, just did the exact thing wrong the other day, so need to fix it asap!
@@KevinPowell I've been suffering from this problem for so long. Texts, icons... whatever I animate transform property on it gets blurry. It's horrible especially when creating infinite animation with keyframes. Any tips or a dedicated video regarding this problem will be very much helpful for someone like me.
Hi Kevin, Thanks for this once-again very informative tutorial in CSS and the performance gains by using this method for implementing box shadows. I have applied this to a WooCommerce Product Archive Query loop which causes the 'Add to Cart' and 'Product link' links to become unaware or displaced. I presume it has something to do with the absolute positioning. Would you mind sharing some advice on how to counteract this behaviour please?
When is it good to use will-change? Last I read on it was to not use it unless you've already run into performance issues. I've used it a bit, but perhaps a bit too often.
i have a question: the way you did hover for performance was best way i ever saw of... but. Q: the elements inside the box are now un-clickable like links and buttons, etc.. so is there a way to make it work with high performance way you showed but the links and all contents are clickable? can we do it with z-index?(i tried it but i might have done it wrong.. dosen't work for me) or is there some other way?
Aren't both of the shadows showing on top of each other on hover? The one that's there always, and the hidden pseudo one you give the opacity 1 on hover. Or maybe I'm missing something... By the way, love all of your content, keep going :)
Hi, I am trying to make en extension that zooms to fill videos on most sites. I am using transform scale for zooming the videos for sites like UA-cam, Netflix, etc. It lags for a higher quality video on my laptop. Is there a better way to animate scaling on a video?
Great video, but you need to put pointer-events:none; on the pseudo-element, or else you can't click on anything in the second div since it's covered by the pseudo-element.
These tricks are very good to know. But to be honest, I don't understand the real reson why transform should actually outperform the top. There is no more algorithmical complexity, if anything, changing top should be simpler to implement efficiently (by browser).
This is my third month being a self-taught student and this channel is gold, your videos help me immensely. Thanks for the content!
*TLDW:* Pre-render your shadows on a pseudo element and animate it's opacity to improve performance. Chrome DevTools has a performance monitor tab where you can see the impact of your CSS design. Opacity and Transforms are MUCH cheaper to animate than position, shadow, etc...
Bonus: Shadows are tied to their respective element's z-depth.
Thanks for the content Kevin! That's actually a neat approach I hadn't thought of and I should really start looking at the performance monitor more when designing.
It's like going down a rabbit hole, one video leads to the next! Nice work I'm finding new things every day.
hi kevin, gr8 tip. thank you. one thing though, you need to set the pseudo element that is positioned absolutely to either z-index:-1 or pointer-events to none, otherwise you can not click on the links in the box. :)
Totally agree on that. The link inside .pseudo-hover is unreachable...
Oh no. Buttons on my site have been using top:; this whole time. 😅 Can you do a video on general performance tips and best practices for CSS?
We need a series for learning how to use the performance tool!
This
I'm from South Africa and we currently have 'Loadshedding' (areas have their power turned off to cut back on power consumption because the power utility company is owned by the government and are a bunch of mizers) and I have just sat for 2 hour, in the dark, going through all your videos. The explanations are clear and you have some really great tips and tricks! Keep up the great work! Really enjoying this content!
I remember trying to animate buttons and shadows to make a hover effect and everything was slow as a turtle, and I didn't understand why xD Good to learn how I can surpass these problems, thanks as always, Kevin!
Wow that's my geek-o-meter fill for the morning!! That was crazily interesting, I will be utilising the dev tools much more from now on - cheers Kevin!
I believe the performance is higher because the transform and opacity properties are GPU accelerated. Awesome tips Kevin!
That was really useful info for me! I didn't realize that most transition that I made was performance heavy even though I saw how laggy it is. Thanks!
Added to my list of global things to do for my site. Will come back and watch again soon while implementing. Thanks, Kevin!
What a video! Can't get enough of this. Absolutely gold info
I think you can replace top:0; left:0; right:0; bottom:0; with just inset:0; and it will still work the same.
ahhhhh this video is AMAZING. I didn't know I needed this at all.
thanks for showing how to measure the performance of these animations
Thankyou Tobias and Kevin, I needed this in my current project, so, WOW!
great breakdown regarding animation performance in the dev tools! that will come in handy. thanks!
Mind blown. I have been doing it all wrong. I often forget to use the performance tab so this was great reminder.
Wow, this is a great approach! I tried this on my site and rendering/paint time went from about 50ms both to about 6ms and 2ms. Thanks!
this is a great explanation... been a dev for years now and still didn't know how to use the performance tab LOL
This is the type of content I really like, small performance tips which put together improve UX!
Awesome, as usual. This will come in handy for my next work. Just on time Kevin. Thanks!
Thanks for the video, and bringing this info to our attention. Well done as always.
I need that shirt!!
I got it from here moderngeek.co/
They have some great stuff!
Roses are red
Violets are blue
unexpected '}' on line 32
Me too😂
Dang it, the site no longer exists! Any other suggestions?
Very nice one thank you ! I've learned so much on CSS performances on that video
I'm the only one when I go to the video immediately put the like automatically?
Sorry, but you're not the only one. I know someone who did too. He used to wonder the same.
That someone is mush😊
One of the best tutors out there. Thank you Kevin :)
I just tried a third option with drop-shadow. And box-shadow outperforms the filter too. I thought they were fast too 🤯
> a teenager, in the late 90s...waiting for images...to load--
I felt that.
Wow. This is new aspect to learn about HTML and CSS
What if there is already a box-shadow of a container and on hover the box-shadow should turn inset, How can we do this by the technique shown by you??
KP delivers once again!!!
Do you have any tips for the jittery text inside the boxes that have transform animated? Thanks for the tip on the box-shadows, just did the exact thing wrong the other day, so need to fix it asap!
I'm not sure if there is much we can do there sadly. Or if there is, I'd love to know!
@@KevinPowell I've been suffering from this problem for so long. Texts, icons... whatever I animate transform property on it gets blurry. It's horrible especially when creating infinite animation with keyframes. Any tips or a dedicated video regarding this problem will be very much helpful for someone like me.
Great video man! Nice use of the Chrome performance tools as well 😃!
Nice video! I ended up having to do something like that today and remembered about your video! Worked great, thanks!
Hi Kevin, Thanks for this once-again very informative tutorial in CSS and the performance gains by using this method for implementing box shadows.
I have applied this to a WooCommerce Product Archive Query loop which causes the 'Add to Cart' and 'Product link' links to become unaware or displaced. I presume it has something to do with the absolute positioning. Would you mind sharing some advice on how to counteract this behaviour please?
these tips are so powerful, ty!!
Okay. All fine and dandy. But what if you have some buttons/links inside the div? They get covered by the pseudo element.
Great video again! Can you make crash course on Styled components I like the way you teach 😄
I don't have very much experience with them :\
@@KevinPowell oh it is okay 😊.
Really great video!
I really aopreciate your way of teaching. Thank you so much
When is it good to use will-change? Last I read on it was to not use it unless you've already run into performance issues. I've used it a bit, but perhaps a bit too often.
i have a question:
the way you did hover for performance was best way i ever saw of... but.
Q: the elements inside the box are now un-clickable like links and buttons, etc.. so is there a way to make it work with high performance way you showed but the links and all contents are clickable? can we do it with z-index?(i tried it but i might have done it wrong.. dosen't work for me) or is there some other way?
This video was very useful for me, thanks for sharing
Love your yeti mic : )
Hello KP, I tried the pseudo card and it is nice, but if there is a link on the card, is it clickable?
Aren't both of the shadows showing on top of each other on hover? The one that's there always, and the hidden pseudo one you give the opacity 1 on hover. Or maybe I'm missing something... By the way, love all of your content, keep going :)
Hi, I am trying to make en extension that zooms to fill videos on most sites. I am using transform scale for zooming the videos for sites like UA-cam, Netflix, etc. It lags for a higher quality video on my laptop. Is there a better way to animate scaling on a video?
Hi. What coloured spot lights are you using for your background? It looks really good.
hey kevin, can we do it for background setting the opacity from 0 to 1 by rgba
Great video, but you need to put pointer-events:none; on the pseudo-element, or else you can't click on anything in the second div since it's covered by the pseudo-element.
or set the z-index low
The problem is that the pseudo element covers the original card making it unclicable.
I liked ur t-shirt btw.
Love that shirt 🤓
Just wondered why you using top, right, left, bottom zero :D Then i saw this is 2 years old. Now you would use inset: 0; instead.
shirt checks out lol
Hi Kevin, this video is awesome. But there is a problem that I've been facing for so long and still can't find a proper solution. The problem is:
The box contents (texts) are getting blurry while transforming. Is there any solution for this? Please help.
Yeah, it's an issue. Often depends on the transform. If there is a solution I don't know what it is
@@KevinPowell Oops...didn't see that coming. I hope you will try and be able to figure that out.
BTW thanks for your quick response.
Kevin, i love your videos. Please consider moving mic somewhere else - it looks like you have a black eye (due to its Shadow on your face)
yeah I know, it'll be fixed next time, lol
These tricks are very good to know.
But to be honest, I don't understand the real reson why transform should actually outperform the top. There is no more algorithmical complexity, if anything, changing top should be simpler to implement efficiently (by browser).
Opacity and transforms are GPU accelerated, and also cause few repaints. Most other things shouldn't be animated if possible.
Wow nice
Awesome stuff
5:47 happily:hover::after
Nice t-shirt :)
loved the img joke xD
Came for animation, got transform 😛
AWSM!.
I also do videos about programming!😁
❤️
You are a pro
Lol epic t shirt
For fast animations: animate shadow opacity instead of animating shadow size. It's realy annoying to watch all 14 mins for such a small info...