Gsap SmoothScroll Custom Cursor is Not Moving Enough

[Sıradışı Digital]

I have a problem when I use custom cursor with smoothscroll plugin. The error occurs when I scroll down the page. Is there any way I can fix this problem?

See the Pen yLQLrRY by mrtsiradisi (@mrtsiradisi) on CodePen

[Rodrigo]

Hi,

 

The problem here is that your cursor element has a position fixed and everything with position fixed inside a transformed component doesn't behave in the way it normally does:

https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children

 

The ScrollSmoother docs mention to move fixed elements outside the smooth wrapper:

Caveats
position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content.

 

Here is a fork of your codepen with the latest syntax as well:

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

 

This also uses GSAP QuickTo as well:

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

 

Hopefully this helps.

Happy Tweening!

[Sıradışı Digital]

Thank you for the explanation.