Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Thanooshan

How to trigger Draggable event with ScrollTrigger

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 post
Share on other sites

Hey Thanooshan. This is definitely possible! But when you get the draggable circle moving on scroll and then a user drags the circle, what should happen? Should it scroll the page?

Link to post
Share on other sites

Hi, @ZachSaucier yes when user drags the draggable circle the page should scroll at the same time, when page scrolls down the draggable circle should move respectively.

Link to post
Share on other sites

This is doable with our brand new ScrollTrigger plugin! It's not the most straightforward because you need to keep things synced and handle resize but here it is:

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

 

ScrollTrigger only works with GSAP 3 so make sure you upgrade. 

  • Like 1
Link to post
Share on other sites

Wow.. @ZachSaucier Awesome. This is what I want. Thanks.  But I'm finding some difficulties in understanding the functions. Could you please give me a small explanation.

Link to post
Share on other sites
5 minutes ago, Thanooshan said:

I'm finding some difficulties in understanding the functions. Could you please give me a small explanation.

Which parts are you having trouble with?

Link to post
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?
    tween.progress(progress);
    ST.scroll(progress * distObj.maxY); //why multiplying?
  }
})

 

Link to post
Share on other sites

I added a couple of comments that will hopefully explain that section more thoroughly.

  • Thanks 1
Link to post
Share on other sites
23 minutes ago, GreenSock said:

Here's one other approach to consider:

 

 

Wow. I like this approach better.

  • Thanks 1
Link to post
Share on other sites

@ZachSaucier I've another doubt. In this case when drag the handler the page scrolls up and down. Is it possible to get current vertical position of the scroll bar, while drag the handler?

Link to post
Share on other sites
49 minutes ago, Thanooshan said:

Is it possible to get current vertical position of the scroll bar, while drag the handler?

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);

 

  • Like 2
  • Thanks 1
Link to post
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 post
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.

×