CSS Animation Optimization and Performance 101

[@DesignCourse]

Get the jank outta here and subscribe already!

[@juliocodes]

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.

[@juliocodes]

@Mastery Of Craft That's true. Also how they try to animate as many elements as they possibly can. I've made that mistake tons of times in the past just because I thought it looked 'cool'.

[@cirusMEDIA]

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!

[@EfeKurnaz]

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

[@JlarMM]

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

[@FullStackMaster]

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

[@nathaaaaaa]

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

[@CristianAlexandruRadu]

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

[@krychanpro]

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

[@CosminCP]

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

[@chhavimanichoubey9437]

excellent video to save in study playlist

[@patrickjosephaugustinahoic9544]

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

[@abhishek_k7]

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

[@kokoshko1985]

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

[@LeFede]

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 ?

[@ck0024]

*The more I learn, the more I realize how illiterate I am.* _Great work, man._ 👍

[@wesleyfeller2114]

Liking the new backdrop!!

[@macke8939]

Perfect timing mate!

[@swoorp]

Very-very helpful. Thanks ❤

[@matiaswebdevwebdev800]

Thanks Gary I am learning a lot from your work.

[@whiztown3557]

I always love your videos. Keep it up 👍

[@jacquesduplessis6175]

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

[@sjn_]

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.

[@syamss3507]

2020 and still waiting for will-change property video

[@uncheat]

But what about transfrom: translate without animation? In some conditions chrome will render it blurry, right?

[@AtamMardes]

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?

[@Jay-eg7yt]

Is the transition property considered an animation? I know it can be used for animation effects such as making a div grow, but I don't see it as a trigger on csstriggers.com. Is transition taxing?

[@anoopvasudevan]

Super useful 👍

[@sarahbrown1230]

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

[@desmondsparrow3490]

please where is the css you used

[@arthurshaidullin7981]

cool staff, can you explain 'transform3d' too?

[@razenkellesly20]

Super nice, Thanks.

[@nandhikaprayoga6510]

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

[@DlSPLACER]

Great stuff! Thx so much

[@dipsikhadutta6412]

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

[@ProsenjeetPaulProsenjeetPaul]

Use tinypng.com for all kind of images compression. Its the best optimization option so far.

[@chefbennyj]

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

[@mikizuk83]

Yeah, I was wondering too... I've checked today, it's still not made!

[@ProsenjeetPaulProsenjeetPaul]

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.

[@surc_]

What did you mean by using absolute positioning for animation?

[@ProsenjeetPaulProsenjeetPaul]

@@surc_ i mean to say avoid transform:translate(x,y) instead of that use with absolute positioning to animate your element e.g top:x,right:y

[@AFTstorm]

Prosenjeet Paul it really depends. A lot of modern phones have pretty good gpus these days so using transform would greatly benefit it. I think you as a developer need to know your audience first and build your site for that audience. Knowing your audience will let you build the right site with the right tools

[@ProsenjeetPaulProsenjeetPaul]

@@AFTstorm well i agree with you partially because on an average audience like me who got an average phone which is not capable of janky/heavy animations . I have tested this on multiple devices and it really depends upon the user phone capabilities. An oneplus one or an i phone has the ability to run this animation smoothly but a phone like Redmi note 3-4 it drops FPS heavily. And i have completely tested it so i came to conclusion that for alteast now we should avoid box shadows and transform.

[@brampeirsful]

Epic!

[@sachinprabhuk6241]

nice video..thank you

[@unboxingexperience]

Good work

[@CreepToeJoe]

Just visit the channel page in KZbin and look at the last two videos! Notice anything?

[@MuhammadAdnan-gx6rd]

Vue.js animation ?

[@antonchinaev3495]

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

[@redsevenbox]

Another one

[@inbiggaaa]

please add subtitles

[@bonleofen]

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

[@ProsenjeetPaulProsenjeetPaul]

I want to understand your question. I am assuming you are talking about infinite css anination or some kind of rotation using css.

[@bonleofen]

@@ProsenjeetPaulProsenjeetPaul check this website www.species-in-pieces.com/

[@bonleofen]

Second viewer

[@AsithChamidu]

First.. yo😋