Thanooshan Posted June 1, 2020 Share Posted June 1, 2020 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 More sharing options...
ZachSaucier Posted June 1, 2020 Share Posted June 1, 2020 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 comment Share on other sites More sharing options...
Thanooshan Posted June 1, 2020 Author Share Posted June 1, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted June 1, 2020 Share Posted June 1, 2020 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. 2 Link to comment Share on other sites More sharing options...
Thanooshan Posted June 1, 2020 Author Share Posted June 1, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted June 1, 2020 Share Posted June 1, 2020 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 comment Share on other sites More sharing options...
Thanooshan Posted June 1, 2020 Author Share Posted June 1, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted June 1, 2020 Share Posted June 1, 2020 I added a couple of comments that will hopefully explain that section more thoroughly. 1 Link to comment Share on other sites More sharing options...
Thanooshan Posted June 2, 2020 Author Share Posted June 2, 2020 Thanks @ZachSaucier you're a life saver! 😀 Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2020 Share Posted June 2, 2020 Here's one other approach to consider: See the Pen 896549f0a83297debd9111fe9b205a97?editors=0010 by GreenSock (@GreenSock) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Thanooshan Posted June 2, 2020 Author Share Posted June 2, 2020 23 minutes ago, GreenSock said: Here's one other approach to consider: Wow. I like this approach better. 1 Link to comment Share on other sites More sharing options...
Thanooshan Posted June 2, 2020 Author Share Posted June 2, 2020 @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 comment Share on other sites More sharing options...
ZachSaucier Posted June 2, 2020 Share Posted June 2, 2020 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); 2 1 Link to comment Share on other sites More sharing options...
Thanooshan Posted June 2, 2020 Author Share Posted June 2, 2020 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. 😊 1 Link to comment Share on other sites More sharing options...
Aeronet Posted September 24, 2021 Share Posted September 24, 2021 Hi all. See the Pen YzQOvPM?editors=0011 by juliofarias (@juliofarias) on CodePen Is it possible to use a container div instead of the body? Thanks. All the best!! Link to comment Share on other sites More sharing options...
OSUblake Posted September 24, 2021 Share Posted September 24, 2021 You would need to rework using your container as the scroller. ST = ScrollTrigger.create({ animation: tween, scrub: true, scroller: container }); Link to comment Share on other sites More sharing options...
GreenSock Posted September 24, 2021 Share Posted September 24, 2021 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 More sharing options...
Aeronet Posted September 24, 2021 Share Posted September 24, 2021 Wow! Thank you very much!!! 🖖 Link to comment Share on other sites More sharing options...
Aeronet Posted September 24, 2021 Share Posted September 24, 2021 Hi guys. It's me again. I've been trying for days to add the horizontal drag and drop control with navigation. But despite the help, it still didn't work out. 🥺 See the Pen PojyqZo?editors=0010 by juliofarias (@juliofarias) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted September 24, 2021 Share Posted September 24, 2021 We don't have the resources to help build out custom solutions, but you should start by working out values that don't make sense, like scrDistObj.maxY. That's 0, so there's nothing to scroll. Link to comment Share on other sites More sharing options...
Aeronet Posted September 24, 2021 Share Posted September 24, 2021 No problem. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now