Markers not moving on mouse scroll

[Mohd Rejoan]

I am using gsap scroll Trigger with smooth scrollbar. But the markers not working it's stays on fixed position. When ever I scroll mouse it's stays on its place.

See the Pen oNWZNEB by md-rejoan (@md-rejoan) on CodePen

[akapowl]

Hey @Mohd Rejoan

 

If you want smooth-scrollbar to work with the markers, I'd suggest following the approach of the demo in the .scrollerProxy docs - i.e. not using it on the body itself but using a dedicated scroller. Since the markers are placed on the body but you are applying transforms to the body with the smooth-scrolling, they will simply just 'scroll' with the flow if you use smooth-scrollbar (properly) on the body due to how the smooth-scrolling works - I said properly there because you actually have some flaws in your code (e.g. not updating ScrollTrigger on 'scroll' of smooth-scrollbar, and not setting a scroller in your ScrollTrigger, which you should do in this case even if it is the body). Also with regard to smooth-scrollbar itself; it is damping and not dumping.

 

Here is your example with a dedicated scroller-container and the markers working (which needs an extra bit of code that is to be found at the end). Hope this is helpful nonetheless.

 

See the Pen 6d9fbb177c0b6742ffa653873c44c258 by akapowl (@akapowl) on CodePen

 

 

Edit:

Have to correct myself here;

Actually a slight change in the mentioned extra bit of code to be added for the markers to work properly makes them also work properly when smooth-scrollbar is being used on the body (only addressing the markers there that actually are supposed to move when scrolling). So this would be a working demo of your example then.

 

See the Pen 43e8ecc075ddaaaf802ab912e4cccdef by akapowl (@akapowl) on CodePen