Why does the CPU load and how do I transfer the load to the GPU?

[qqignatqq]

Hello. I am animating, but I am observing a high load on the CPU.

The essence of animation is as follows: when you hover over a block, the main image should approach and when you move the mouse on this block, the image should also move.

 

 

video: https://yadi.sk/i/XfepvkILc7_0oA

https://jsfiddle.net/j5bcuar3/5/

 

1. Why is the CPU loaded? After all, as I understood, at animation the CPU should not be loaded.
2. Hint, is it possible somehow to optimize this animation to reduce the load a little bit and increase the smoothness?

[ZachSaucier]

Hey qqignatqq, thanks for the minimal demo.

 

The main issue here is just the event listeners - I'm pretty sure they cause the CPU to work some no matter what you do in it. I get ~6% CPU load on your demo but ~3% with absolutely nothing going on: https://jsfiddle.net/0k9xzboc/

 

But there are some super minor things that you could do to slightly improve things:

• Apply will-change: transform; to each element whose transform is going to be changed.
• Use xPercent and yPercent instead of x: "n%" and the same for y in GSAP. Probably can't tell the difference but it would prevent some parsing from happening.
• Get your offsets outside of the event listeners. This is because they can cause more work as well, so getting them once and referring to the stored values saves some CPU work. If your elements are responsive you should updated your saved values on resize if they change.

With those changes I get ~5% so a slight improvement https://jsfiddle.net/v01e839r/

[qqignatqq]

6%? What?

Wait, you have 6% where it shows? In Task Manager?  Or the Perfomance monitor in your browser?

If you have 6%, I would venture to assume that you just have intel i9-9900KS.

 

 

Quote

will-change: transform;

Yeah, I tried to use that. It didn't help.

 

Quote

xPercent and yPercent

I tried, but it didn't help, but thank you for that, because I didn't know about xyPercent before.

 

Quote

Get your offsets outside of the event listeners...

I'm not allowed outside. I have 20 of those blocks on my website. Only if you prescribe a separate animation for each block, but I don't think it'll help much. How can "this" load the CPU so much?

 

[GreenSock]

I'd definitely avoid calling this.offsetWidth and this.offsetHeight every time the mouse moves. That can force the browser to recalculate things. You should be able to just save those into variables outside your function, and reference them inside your function. 

 

Also, mousemove events can fire much more frequently than the screen actually refreshes (requestAnimationFrame), so you could reduce the workload by throttling those. Maybe avoid jQuery too (though that's probably not your main issue). I don't have time to rewrite your code right now, but let us know if you need more help.