3 ms·

Has anyone actually managed to loop animations on the web without putting the CPU on fire? It was my task recently to optimize some animations (done with Web A

by pimpl 11y ago

Has anyone actually managed to loop animations on the web without putting the CPU on fire? 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…

bhouston 11y ago
You want to use GPU-based skinning or similar techniques for best performance. Also are you limiting your framerate (not framework, sorry) to something reasonable? Also I recommend not creating too many objects to be GC'ed.
- pimpl 11y ago
  What do you mean by limiting my framework? 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).
  - bhouston 11y ago
    Framerate, sorry. Just make sure it isn't updating constantly. Can you share an example btw?
deleted 11y ago
[deleted]
m_st 11y ago
Same here on Firefox 31 on Windows 8.1. 25% used on my dual-core i5 with HT. This just sucks. 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.
- RickHull 11y ago
  The site used 100% of my old Core 2 Duo's CPU on Iceweasel / Jessie; brought the machine to its knees. LOL js.
- ohitsdom 11y ago
  > until I got the first complaints about users not being able to use their computers anymore They got snow in their browser, and they still complained. People are so ungrateful. Seriously though, this animation sounds fun and neat.
JonnieCache 11y ago
Here's how I've achieved that cheesy 90s spinning effect in the past: @keyframes spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } } .spin { animation: spin ease-in-out 6s infinite; } All done on the GPU as far as I can tell... 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.
- nkozyra 11y ago
  Right, but the point is even GPU-optimized animations in the browser seem to tax the CPU. It's something I've experienced as well.
  - JonnieCache 11y ago
    Even when they're controlled/computed/whatever purely through css as above? Maybe I've just been lucky in my limited experience with looping them infinitely like this.
frozenport 11y ago
Could you render the animation, and play it back as a gif?
- leppr 11y ago
  That's the traditional way to do it afaik, just tile a gif over the whole viewport.

by pimpl 11y ago

bhouston 11y ago

You want to use GPU-based skinning or similar techniques for best performance. Also are you limiting your framerate (not framework, sorry) to something reasonable? Also I recommend not creating too many objects to be GC'ed.

pimpl 11y ago
What do you mean by limiting my framework? 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).
- bhouston 11y ago
  Framerate, sorry. Just make sure it isn't updating constantly. Can you share an example btw?

deleted 11y ago

[deleted]

m_st 11y ago

Same here on Firefox 31 on Windows 8.1. 25% used on my dual-core i5 with HT. This just sucks. 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.

RickHull 11y ago
The site used 100% of my old Core 2 Duo's CPU on Iceweasel / Jessie; brought the machine to its knees. LOL js.
ohitsdom 11y ago
> until I got the first complaints about users not being able to use their computers anymore They got snow in their browser, and they still complained. People are so ungrateful. Seriously though, this animation sounds fun and neat.

JonnieCache 11y ago

Here's how I've achieved that cheesy 90s spinning effect in the past: @keyframes spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } } .spin { animation: spin ease-in-out 6s infinite; } All done on the GPU as far as I can tell... 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.

nkozyra 11y ago
Right, but the point is even GPU-optimized animations in the browser seem to tax the CPU. It's something I've experienced as well.
- JonnieCache 11y ago
  Even when they're controlled/computed/whatever purely through css as above? Maybe I've just been lucky in my limited experience with looping them infinitely like this.

frozenport 11y ago

Could you render the animation, and play it back as a gif?

leppr 11y ago
That's the traditional way to do it afaik, just tile a gif over the whole viewport.