It was my task recently to optimize some animations (done with Web Animations polyfill) and even though all the profilers showed that CPU is doing almost nothing (GPU animated all the stuff) Chrome was using ~25% of CPU all the time which resulted in a noisy fan after a minute or two.
I feel like I’m missing something here, I believe there must be a way to do it…
@keyframes spin {
0% { transform: scaleX(1); }
50% { transform: scaleX(-1); }
100% { transform: scaleX(1); }
}
.spin {
animation: spin ease-in-out 6s infinite;
}
The only satisfactory way to do web animation I've found is to do it 100% in css by toggling classes. As soon as the JS interpreter gets involved in any way, things go south.
Years ago I added a 'snow' animation JS libary to a custom website which let little snow flakes drop during winter time. All just for fun. It turned out to be fun only for a few days until I got the first complaints about users not being able to use their computers anymore and mobile devices being barely able to scroll anything.
I also believe that there must be a better way for simple animations.
They got snow in their browser, and they still complained. People are so ungrateful.
Seriously though, this animation sounds fun and neat.
Also are you limiting your framerate (not framework, sorry) to something reasonable?
Also I recommend not creating too many objects to be GC'ed.
Yeah, true, I don’t create any objects in that animation actually. I just do opacity animations (from 0 to 1 and vice versa) and some transforms sometimes (which are supposed to be 'cheap' according to some resources on the internet).