Jump to content
Search Community

How to trigger Draggable event with ScrollTrigger

Thanooshan test
Moderator Tag

Recommended Posts

I've a draggable bar, which can be drag horizontally. What I want to do is, on page scroll Is it possible to trigger draggable event to drag? Or is there any other way to achieve this.


I already posted this question in StackOverflow but didn't get any response, So if someone could help me on this that would be appreciated.


See the Pen abdover by thanooshan (@thanooshan) on CodePen

Link to comment
Share on other sites

var drag = Draggable.create("#handler", {
  trigger: "#handler",
  type: "x",
  bounds: {minX: 0, maxX: innerWidth},
  onDrag: function() {
    const progress = this.x / distObj.x; //why dividing?
    ST.scroll(progress * distObj.maxY); //why multiplying?


Link to comment
Share on other sites

25 minutes ago, ZachSaucier said:

Sure it is. Assuming you're using @GreenSock's approach above, that value is passed into the .scroll function in line 14:

trigger.scroll(this.x / barLength * maxScroll);


wow.. solution was already in the answer. I need to learn a lot. thanks again. 😊

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Yeah, I assume you're looking for something like this: 

See the Pen bGRxxGZ?editors=0010 by GreenSock (@GreenSock) on CodePen


I didn't have time to comb through all the original code to see if that's the best way to approach something like this, but the tweaks at least seem to work (assuming I understand your goal correctly). 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...