How to use Scrollbar in GSAP animation?

[Qamar Aziz]

I was wondering if there is any workaround where we can create a scrollbar using GSAP, I have attached the codepen. Basically, I wanted to try how to drag the blue box and make the page scroll up or down.

See the Pen jORdOvw by azizqamar7 (@azizqamar7) on CodePen

[Rodrigo]

Hi,

 

I never tried something like that, but the first thing it comes to my mind is to use the ScrollTo Plugin in order to create a GSAP Tween that animates the scrolling from the top of the page to the bottom (you can pass a "max" value to the plugin to indicate that):

https://gsap.com/docs/v3/Plugins/ScrollToPlugin

 

Then you can use a Draggable instance to update the progress of that tween that handles the scroll for you, like this demo:

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

 

Hopefully this helps.

Happy Tweeing!

[Qamar Aziz]

But I feel it's still hard to achieve something like I shared, maybe there is another way around it as I want to scroll the page.

[Rodrigo]

7 hours ago, Qamar Aziz said:

But I feel it's still hard to achieve something like I shared, maybe there is another way around it as I want to scroll the page.

Does it? Honestly I can't think of a simpler way to achieve this. You can do it by hand but the calculations will become far more complex, I can tell you that. I you remove the ScrollTo Plugin from the equation, you'll have to find the height of the document element, to that you have to subtract the height of the screen and then use the same calculation in the Draggable instance to factor the current Y position of the element being dragged to the boundaries of the Draggable instance, translate that into a scroll position and finally use the scrollTo method to update the actual scroll position.

 

If you ask me it's quite simpler to let GSAP and the ScrollTo Plugin to handle all the math of that for you.

 

What exactly are you struggling with about this code?

onDrag:function() {
  tnProgress = this.x / limit;
  logDiv.innerHTML = tnProgress.toFixed(4);
  t.progress(tnProgress);
  gsap.set(dragBar, {width:this.x + 10});
},

That's all there is to it. I see you updated your demo and you're using ScrollTrigger, you can definitely use the same approach to update the scroll position of a ScrollTrigger instance:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/scroll()

 

But I still recommend you to use the ScrollTo Plugin and leverage everything with the native scroll, updating this with ScrollTrigger will involve even more calculations actually.

 

Happy Tweening!

[Qamar Aziz]

Ok let me try, thank you so much for pushing further with the ScrollTo plugin. Once I achieved will share here