Performance and Web Animation
The last few years the mobile web is growing really fast, but there are still lots of problems that must be solved in order to achieve a better user experience. One of these is web animations and performance. Usually well-performed animations run at 60 frames per second (fps), and believe me or not that is possible, but not always easy.
Please stop trying to animate unanimatable CSS properties: I have seen a lot of times people trying to animate width/height/top/left properties, etc. Currently there are only two things that can be animated with good performance: transform and opacity. As you can see in the video below, the difference is drastic between animating top/left and transform, because transform is GPU optimized and will cost you only composition work which is cheap compared to layout and painting. Open your timeline in Chrome DevTools and test.
There is also a website called CSS Triggers where you can find what it costs you to animate a certain property. Use it please! Use it and always measure, test on real devices, but don’t do it on the latest Samsung flagship model! Try using a 3–4 year old device, your users probably don’t have super-duper smartphone.
Extract and compose elements
Maybe you want to animate border or box-shadow, but before you start doing, think for a moment. Can you actually extract those properties as separate elements? In most of the situations you can do it. Check the examples below, they are simple but will give you some ideas how to extract elements which, most importantly, could be huge performance improvement.
The will-change property could optimize your animations. It tells the browser “I am planning to animate this and that later, so take care of that”. The browser creates a new layer (the same layer created by z-index) and it is usually easier to “move” those layers around. Something very important: don’t abuse it. Too many layers mean too much memory consumption, and not all smartphones have 6GB of RAM.
Please do it
I know is not so easy, but at least WE MUST TRY. Our users deserve better user experience.