Jump to content
Search Community

GSAP Draggable + Custom Scrollbar

JustinNobles test
Moderator Tag

Recommended Posts

  • JustinNobles changed the title to GSAP Draggable + Custom Scrollbar

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

 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

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

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

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

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