Mouse glitch on scrollEffect

[makilyes]

Hello,

I'm a beginner developper and just started with Gsap and I'm doing a project on React

I wanted to have a dot cursor, and onScroll it changes shape or color. For this point it's ok, perhaps each time I change section, the scroll gets triggered, and I have the shape that glitches (goes to the left, or 'x' position, to get back at the cursor position). It happens each time it gets called.

 

I did a codePen just with one section, when we scroll down slowly, at some point you can see the shape moving to the left, to then get back following the cursor.

 

Thank you for your help, and sorry for my bad english

 

 

See the Pen YzrxzZX by shahyne (@shahyne) on CodePen

[OSUblake]

Welcome to the forums @makilyes

 

You are overwriting your inline styles every time one of your ScrollTrigger callbacks is called, which gets rid of the transforms.

 

You can just set what you want, like this.

gsap.set(".app-cursor", {
  "--box-shadow": "0 4px 48px 24px #ffcd03"
})

 

But it might simpler to just add and remove CSS classes with those settings. 

 

And as for setting the transforms, it's better to let GSAP handle that. You can use a quickerSetter for that. 

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

[makilyes]

Hi @OSUblake ,

 

Thanks, yes it worked. I changed like  you said, and change my code with quickSetter, like the example.

 

Thanks for the support,

Ilyes