CSS Animation Optimization and Performance 101
HTML-код
- Опубликовано: 10 сен 2024
- promo.linode.c... - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're checking out a very important topic that I haven't covered much here on the channel -- and that is CSS animation performance. If you want your animations to appear smooth on as many devices as possibles, there's definitely some concepts and best practices you should follow. We're going to take a look at some slides first, and then we'll hop into a real-world example where I will demonstrate how to use DevTools to notice any issues with your CSS animations.
Site referenced in the video:
csstriggers.com
Let's get started!
#frontend #css #nojank
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
Get the jank outta here and subscribe already!
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.
@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'.
This is gold, most valuable content I've seen on YT for Frontend devs. Thank you Sir Gary Simon.
Please more about smooth web animations, 60fps, hero animations etc thanks
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!
Thanks Design course for this nice CSS lesson and extra tips!
*The more I learn, the more I realize how illiterate I am.* _Great work, man._ 👍
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!!!
Your channel is pretty near to perfection, pls don't stop
One of the best episode, want more about performance in frontend!
Very-very helpful. Thanks ❤
Thank you a lot!!! I didn't even think of it this way
Watching this from cote d'ivoire...thank you so much !
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 ?
Just what I wanted and exactly when I wanted it. Thank you!
Perfect timing mate!
I love how this video's thumbnail matches the previous video's one
I always love your videos. Keep it up 👍
Thanks Gary I am learning a lot from your work.
Liking the new backdrop!!
Super useful 👍
Janky is my new favourite word. :D Great video.
Great stuff! Thx so much
Super nice, Thanks.
But what about transfrom: translate without animation? In some conditions chrome will render it blurry, right?
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.
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?
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?
2020 and still waiting for will-change property video
nice video..thank you
please where is the css you used
Hey nice video as always, I want to know, is it good do animation on canvas rather than in HTML element?
You said you were going to link in comments a custom willchange video but did not
Epic!
Good work
Thanks it helps a lot, can you make a video on how to create images more responsive and image optimization for web. Thank you.
Use tinypng.com for all kind of images compression. Its the best optimization option so far.
cool staff, can you explain 'transform3d' too?
Just visit the channel page in RUclips and look at the last two videos! Notice anything?
Another one
Did you ever make a 'will-change' video?
Yeah, I was wondering too... I've checked today, it's still not made!
When the banks stop using IE11 by 2025 I will be thrilled to do actual animations.
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.
What did you mean by using absolute positioning for animation?
@@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
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
@@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.
Vue.js animation ?
please add subtitles
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 want to understand your question. I am assuming you are talking about infinite css anination or some kind of rotation using css.
@@ProsenjeetPaulProsenjeetPaul check this website www.species-in-pieces.com/
Second viewer
First.. yo😋