custom scrollBar with gsap

[Romanus 4 Likes (Newbie)]

Hello! I am making a custom scrollBar.

It doesn't work for me when I try to move it with the mouse. smoother.scrollTo doesn't work the way I think.

 

two sections of 1000px. If smoother.scrollTo(1000) the scroll will not be in the middle. Why? Because of this, my calculations break.

 

And scrollTo teleports me to the coordinate. I would like to move smoothly.

See the Pen OJoBXNV?editors=1011 by romanusname (@romanusname) on CodePen

[GreenSock 18,876 Likes (Superhero)]

If you want the scrollTo() to allow the smoothing effect, you should set the smooth parameter to true: 

// bad
smoother.scrollTo(to);

// good
smoother.scrollTo(to, true);

But you also have logic problems in your code. You set up a tween with a ScrollTrigger that moves the circle whenever the page's scroll position changes (and it has a 1-second scrub delay), and you ALSO have a Draggable trying to control the same element. So when you drag, your onDrag updates the scroll position which in turn tells the tween to move the circle which you're already trying to drag (so they're fighting with each other). See what I mean? Your scrub is gradually trying to alter the y position of the circle which you're also trying to drag simultaneously. 

 

Your calculations were wrong in the onDrag too (see my fork below). 

 

Even if you disable the ScrollTrigger onPress of the Draggable, and then enable it onRelease, you'll still have some weirdness because your scrolling is smoothed, thus it takes 2 seconds to "catch up". If you drag to the circle to a new position and then release right away, you'll see the circle jump back a bit and then eventually land when you released - that's because you re-connected the ScrollTrigger at that point, so the circle is then reflecting the smoothed position. 

 

See the Pen poOxxmb?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Good luck with the project. I hope that at least gives you a nudge in a helpful direction.