Custom cursor with gsap with horizontal scroll

[Akash Ranjan]

Hey Guys,

 

I am trying to create a custom cursor with gsap. My site is horizontal scroll based as you can see in the codepen demo. The problem is whenever I am scrolling the cursor also moves up.

 

How can i stop this from happening and make it behave just like a normal cursor.

 

I am working in Next JS with the cursor being a separate component.

 

Please help me.

 

Thanks alot

See the Pen rNRZWxx by akashrwx (@akashrwx) on CodePen

[akapowl]

That's probably mostly a concern of your CSS styling and nothing GSAP related.

Your cursor is set to position: absolute  - that will be in relation to the body in your case.

The page keeps on scrolling vertically, even if you fake a horizontal scrolling movement.

Thus you cursor will also move up as it keeps scrolling with the body.

The easiest way would probably be to just set it to position: fixed isntead.
 

[Akash Ranjan]

I am really feeling dumb right now. Thanks alot for your help

[Rodrigo]

Hi,

 

On top of Paul's great advice you should also use GSAP QuickTo for this:

https://gsap.com/docs/v3/GSAP/gsap.quickTo()

 

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!