High CPU usage with basic (but repeating) animation.

[Steffen Wenzel]

This animation uses 50%+ of the cpu on my MacBook Pro (2,6 GHz Intel Core i5, Late 2013) in Firefox (43.0.3). I know I'm constantly doing something but I though opacity was a "cheap" property to animate especially when leveraging requestAnimationFrame. As I'm still new to GSAP I'd like to now if this is normal or if I'm doing something wrong

See the Pen KVavrZ by anon (@anon) on CodePen

[Dipscom]

Hi Stefffen Wenzel, welcome to the forums,

 

Are you getting 50% CPU usage constantly while testing? I had a quick look here and it does spike to 50% on load and all but after it goes down to 10-15%. Have a think of what else could be running in Firefox at the same time (extensions, plugins, etc). Have you tried running it in privacy mode? With all extras disabled? 

 

Also, if you only get this unreasonable level of CPU usage, I would imagine the issue is with Firefox, not with your animation or GSAP itself.

[OSUblake]

CodePen's editor is horrible, and causes massive CPU drain in browsers like IE and Firefox. It's better to view the result in full page view for those browsers. Or use an editor that performs better, like JS Bin, JSfiddle, or Plunker.

 

Here's your example in JSfiddle.

https://jsfiddle.net/OSUblake/6rn41uea/show/

[Diaco]

Hi Steffen Wenzel 

 

in addition to blake's advise ; via Codepen , pls check your code performance with Debug mode

[Steffen Wenzel]

I did some digging after you all said that this load is not normal. JSFiddle reduced the load by about 10% but it did not drop. Deactivating plugins/extension (Firebug etc.) did not help either. The culprit was the display settings. I'm running the MacBook in scaled (non retina) resolution and it even says on the panel that this can reduce performance. Using the default resolution keeps everything quiet, using scaled (and Firefox) makes the fans kick in after a minute.

 

Knowing this, I'm more relaxed about the perfomance of my page now. Thanks!