How do I improve performance of this animation

1

I tried to recreate an animation that can be seen on Deezer while you are playing music.

See it in action: http://codepen.io/GreatDanton/pen/PNMzby

I opened my system monitor just to see I get around 30% load on both cores, sometimes even more, and animation is a bit laggy from time to time. So my question now is, how do I optimize this animation (make it smoother). I can increase number of steps, but that puts even more load on the cpu.

Thanks.

2

The thing about animating CSS properties is that some properties are much less efficient to animate than others. I’d take a look http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/, and other related posts, to see which properties are best worked with. Typically you want to use mostly transforms, and not actually modify the layout, because it causes the browser to have to repaint and re-flow the layout over and over again.

There’s a website that actually documents the speed of particular properties when animated, but I can’t remember which one. If I find it, I’ll let you know.

1 Like
3

Thanks for the link. I changed height transforms to translateY, now I am getting average 60fps, and 10% less load on both cores.