CSS Animation Optimization and Performance 101

First.. yo😋

Second viewer

Hey, I have this request if you could create a tutorial about animation that happens on wheel events. Something like species in pieces website. I have made this request before as well. In case, you're seeing this, please make something like that. Thanks. You're awesome

I always love your videos. Keep it up 👍

Please more about smooth web animations, 60fps, hero animations etc thanks

Perfect timing mate!

Sometimes people tend to forget how important animation optimization is, me included. I can't tell you how many times I've been on sites that use a lot of animations and the experience is just painful.

Good work

Watching this from cote d'ivoire...thank you so much !

Vue.js animation ?

Liking the new backdrop!!

Thanks Design course for this nice CSS lesson and extra tips!

nice video..thank you

Hi, one unrelated question:
Which one of these ( Spotfire, QlikSense or Tableau ) is more popular and pays the most? Which one do you recommend I should learn?

The more I learn, the more I realize how illiterate I am. Great work, man. 👍

cool staff, can you explain 'transform3d' too?

Janky is my new favourite word. :D Great video.

I'm building a social network. The animations are painful.
Sometimes, I get lags.
I'll update the project with what you just learned me.
Great tutorials. Very well explained. Please Keep Up!!!

Epic!

Geezus man, the quality of your videos is awesome. You're motivating me to finish freecodecamp.... so cut it out!! lol.

This is gold, most valuable content I've seen on YT for Frontend devs. Thank you Sir Gary Simon.

One of the best episode, want more about performance in frontend!

Just what I wanted and exactly when I wanted it. Thank you!

Thanks it helps a lot, can you make a video on how to create images more responsive and image optimization for web. Thank you.

So let me add 2 major points to your topic for all the web dev out there.
1. Avoid box shadow mossst important.
2. Avoid Css3 animation instead of that use normal css with position absolute

You wont exp this in web but you will exp the lag in mobile.
Having an exp of around 9+ years now and this really decrease the hampering job.

Super nice, Thanks.

Hey nice video as always, I want to know, is it good do animation on canvas rather than in HTML element?

Thanks Gary I am learning a lot from your work.

Another one

Your channel is pretty near to perfection, pls don't stop

I love how this video's thumbnail matches the previous video's one

Great stuff! Thx so much

When the banks stop using IE11 by 2025 I will be thrilled to do actual animations.

I read the transform property can be used to create almost any types of animations but I find it pretty difficult to create certain animations. The Android's reveal animation starting with a circle for instance, just like the one on your tutorial using clip-path. Perhaps, you could make some videos on creating unique and creative animations using the properties that trigger composite only? Would be a lot helpful for a guy like me who already know this thing about cheaply animatable properties but struggle to create the desired animations.

Did you ever make a 'will-change' video?

Thank you a lot!!! I didn't even think of it this way

You said you were going to link in comments a custom willchange video but did not

2020 and still waiting for will-change property video

please add subtitles

O...M...G... i just applied the 'will-change' property to some elements in a LARGE cross-platform app I've been working on and BOOM. It's as smooth as native!
Thanks a lot for this video!

Very-very helpful. Thanks ❤

Super useful 👍

so if you have an absolute positioned element, it is safe to asume that it wont trigger a layout recalculate after changing its content or its width ?

please where is the css you used

excellent video to save in study playlist

Get the jank outta here and subscribe already!