Jump to content
GreenSock

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

GSAP Draggable + Custom Scrollbar

Recommended Posts

How do I make my .gallery div move along with my custom scrollbar div to see the rest of my gallery that is past the 100 viewport width when I drag the scrollbar div to the left or right using Draggable?

 

Any help would be appreciated

See the Pen bGBQrGE by JustinNobles (@JustinNobles) on CodePen

Link to comment
Share on other sites

  • JustinNobles changed the title to GSAP Draggable + Custom Scrollbar

yup that is PERFECT!!! Thank you so much. Also side question how do I find my previous forums that I have posted 

Link to comment
Share on other sites

Sweet sounds good. Also how do I get that code to work in typescript, because I am getting the error Property 'x' does not exist on type 'WorkComponent'

gsap.to('.gallery', {x: -this.x})

 

 

Link to comment
Share on other sites

the error is being thrown specifically on -this.x

Link to comment
Share on other sites

That's TypeScript misinterpreting things - it doesn't understand what "this" is in that context. Totally unrelated to GSAP/Draggable.  You could work around that like: 

let drag = Draggable.create('.scrollbar', {
  type: "x",
  bounds: ".scrollbarContainer",
  throwProps: true,
  onDrag() {
    gsap.to('.gallery', {x: -drag.x, overwrite: true});
  }
})[0];

 

  • Like 2
Link to comment
Share on other sites

Awesome, but now I ran into another problem that isn't in the codepen. I had a scrolltrigger that works horizontally but stops when I implemented the code above when I drag the scrollbar

Link to comment
Share on other sites

 gsap.to(".gallery", {

          xPercent: -100,

          x: innerWidth,

          ease: "none",

          scrollTrigger: {

            trigger: ".gallery",

            start: "top top",

            end: () => innerWidth,

            scrub: true,

            pin: true,

            anticipatePin: 1

          }

        });

Link to comment
Share on other sites

The scrollbar and the horizontal scroll work both seperately but as soon as I drag the scrollbar my horizontal scrolling with scrolltrigger stops working

Link to comment
Share on other sites

It's pretty much impossible for us to troubleshoot blind and unfortunately we don't have the resources to provide free general consulting for each problem you run into but we'd be glad to answer GSAP-specific questions. 

 

If you still need some help, please provide a minimal demo with only the absolutely essential code to reproduce the issue. Remember, the simpler, the better. :)

  • Like 2
Link to comment
Share on other sites

understandable trying to make another codepen right now. I thought it was a possible simple error on my end since it only dealt with gsaps scrolltrigger and gsaps draggable

Link to comment
Share on other sites

here is the new codepen and for some reason none of my scrolltrigger code is working when i put it into a codepen but in my actual project it works fine

 

thanks so far for the quick responses and help

 

See the Pen bGBQrGE by JustinNobles (@JustinNobles) on CodePen

 

 

 

Link to comment
Share on other sites

Yeah, that's what I was afraid of - you've got 3 totally different things trying to control the same properties/positions and not keeping them synchronized. You also had quite a few typos and scope issues. 

 

It's beyond the scope of help we can provide for free in these forums to help you build this whole thing, but I can give you some pointers. Here's at least a fork that fixes some of the typos and scope issues: 

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

 

You're trying to have a fake horizontal scrollbar that's Draggable-driven control the x position of the gallery...and at the same time you're applying a Draggable directly to the gallery so people can drag that and you're also using the page's natural vertical scrollbar to control the x position of the gallery. See the issue? What if the user scrolls down...and it moves the playhead of the tween so that the gallery moves...but now your fake horizontal scrollbar is out of sync - what if the user drags that? Again, if the fake Draggable "scrollbar" updates things, you must update the scroll position of the entire page to reflect that as well (synchronize). And the same goes for your Draggable on the gallery itself. Luckily that syncs with the raw "x" position on pointerdown. But you've also got a mix of "x" and "xPercent" that you're controlling. It's a bit of a mess :)

 

It's all doable, of course, but you've gotta manage all the values properly and synchronize them. Dragging the gallery, for example, should also update the overall page's scroll position. See what I mean? 

  • Like 3
Link to comment
Share on other sites

That fork is a great start for me though. I appreciate the feedback. This helps a lot. Thanks for pointing me in the right direction! Last question, what do you mean by synchronize? 

Link to comment
Share on other sites

2 hours ago, JustinNobles said:

Last question, what do you mean by synchronize?

Example: the position of the "fake" horizontal scrollbar may be at the very start, but then you use your mousewheel to scroll vertically down halfway...so the vertical scroll position indicates it's at 50% but the fake horizontal scrollbar indicates it is at the very start. They're not synchronized. What would you expect to happen if the user now grabs the fake horizontal scrollbar and begins dragging? It'll suddenly JUMP to the start and move from there. No bueno. 

 

If you drag the gallery itself, the vertical scroll position of the page doesn't reflect that movement correctly either. So if the user starts scrolling after dragging, it'll jump. Again, that's not an issue with the tools - it's a logic thing with your code. 

 

Make sense? 

  • Like 2
Link to comment
Share on other sites

Makes sense, that clarifies things thank you!!!

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.
×