Mouse Follow Animation Causing Lag on Scroll

Design help Custom code
1

Hey Guys. A few days ago I was made redundant from my first design job. Since then I’ve been sorting out my portfolio, but I’m come to a halt.

I’ve been messing around with the Hero section for about 3-4 hours now, trying to fix the lag!

The problem lies within the ‘spotlight’ animation which moves with the mouse. You’ll find the code for this in the ‘spotlight’ embed div. (I’m not a coder)

You’ll see the jitter/lag only occurs when you start a scroll after the mouse has been moved in the hero. If I keep my mouse still, there is no lag. So from this info, I’m assuming that something is being triggered on mouse scroll which is causing jitteriness.

I’ve looked through dev tools and this seems a CPU spike issue, and the ‘paint’ seems to be taking too long, if that means anything to you.

Would love some help on this, thankyou!

Here is my site Read-Only:

1 Like
2

Hi,

Why not use GSAP for this? Actually the quickTo() method is great for these cases:
https://gsap.com/docs/v3/GSAP/gsap.quickTo()#mouse-follower-demo

Also I see that you’re using some custom conditional logic for some of your code and animations, I strongly recommend you to use GSAP MatchMedia:
https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

Finally GSAP is now 100% free and super easy to integrate in Webflow, just check the installation page in GSAP’s Learning Center:
https://gsap.com/resources/Webflow

Hopefully this helps!