qqignatqq Posted February 27, 2020 Share Posted February 27, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 27, 2020 Share Posted February 27, 2020 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/ Link to comment Share on other sites More sharing options...
qqignatqq Posted February 27, 2020 Author Share Posted February 27, 2020 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? Link to comment Share on other sites More sharing options...
GreenSock Posted February 28, 2020 Share Posted February 28, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now