JavaScript/CSS animations can be very expensive 🤑 regarding CPU power and RAM usage. They all trigger actions such as (re)paint/(re)flow that consume a lot of resources. Thus avoid using animations as much as possible, and only do so when necessary.
If you must include an animation, only employ the opacity and transform CSS3 properties as well as the related functions: 'translate, rotate, scale, and transform'. The browser automatically optimizes these two properties ⚙️, and the GPU can handle the animation.
You can help the browser minimize the resources consumed by using will-change to warn ⚠️ it that an amination will take place.
The will-change property warns the browser that an animation, which it is capable of optimizing, will be triggered. Used intelligently 🧠, this approach will consume fewer resources.
#greenit #developer #animation
High-performance animation: https://web.dev/animations-guide/