Jump to content
GreenSock

pixelarchitect

Horizontal scroll with Draggable

Go to solution Solved by akapowl,

Recommended Posts

I am currently trying to built a page where you can scroll horizontal instead of vertical. I have basically everything working but wanted to add a drag function to it. I tried implementing gsap's Draggable and I got the pointer cursor working but it is not dragging, I feel im close but can't find the solution, someone has an idea?

See the Pen jOwENGd by pixelarchitect (@pixelarchitect) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey @pixelarchitect

 

The logic for the proxy-draggable is the same as in the demo that you probably got the idea from.

 

See the Pen ZELQqeJ by GreenSock (@GreenSock) on CodePen

 

 

 

I changed the setup for the horizontal scroll you are using here a bit to match the setup from that draggable demo.

 

See the Pen ZEpNLZa by GreenSock (@GreenSock) on CodePen

 

 

What I did was to isolate the creation of the scrolltrigger from the animation itself and store each in the respective variable, the draggable needs to be working as is.

 

The only thing left to do was to change the neccessary dragRatio to the part in the horizontal sroll that's there to calculate the offset between the duration of the scroll and the amount of x-translation of the content (that needs to be included there when triggering things when certain sections reach a certain point in the viewport), meaning this:

 

var dragRatio = (maxWidth / (maxWidth - window.innerWidth))

 

That should work as expected. Hope it helps.

 

See the Pen e69332445fc9a6cb4d9f993589a3eb74 by akapowl (@akapowl) on CodePen

 

  • Like 6
Link to comment
Share on other sites

Nice job, @akapowl. I noticed the drag behavior was super weird and laggy. After poking around, I discovered that it's because there's a CSS library being loaded that's applying scroll-behavior: smooth which is NOT good. It totally interferes with JS-based scrolling. So you may need to add this CSS: 

html, body {
  scroll-behavior: auto !important;
}

 

  • Like 3
Link to comment
Share on other sites

 

I did not even notice any lag, to be honest - but that's good to know.  In the horizontall scroll demo (which is from the scrolltrigger demoes section) there is also bootstrap being loaded - not sure if it matters much there, though.

 

What I did notice though, is that the dragRatio also needs to be changed on resizes, so you might want to consider overwriting the variable inside the getMaxWidth function up top after the calculations for the maxWidth, @pixelarchitect

 

Link to comment
Share on other sites

I have been working almost the whole day to try to figure out where that scroll bug came from, I didn't have the bug on codepen but when I implemented it in my site it was super bad... that css trick did the trick! @GreenSock & @akapowl you guys should wear capes!

  • Like 3
Link to comment
Share on other sites

37 minutes ago, pixelarchitect said:

@GreenSock & @akapowl you guys should wear capes!

You say that as if we don't. 

 

🤔

  • Haha 4
Link to comment
Share on other sites

I was wondering if it's possible to make the drag go smooth? I tried looking at InertiaPlugin using 'inertia: true', but it didn't work for me. Somebody knows the solution or can help me into the right direction?

Link to comment
Share on other sites

 

You'll need to apply the same function as is set for the onDrag for the onThrowUpdate callback.

 

Does this work like what you're looking for?

 

See the Pen 753c9839a59e4cb1e0ca7f90fa064513 by akapowl (@akapowl) on CodePen

 

onThrowUpdate Function - A function that should be called every time the element updates its position or rotation during the “throw” animation (after the user flicks, releasing the mouse/touch with momentum). It is essentially the onUpdate that is assigned to that inertia tween, so it gets called on every “tick” (refresh) until the element comes to rest.

 

 

Edit:

...and/or set a numerical scrub - depending on what feels good/better for you.

 

 

  • Like 3
Link to comment
Share on other sites

For inertia plugin to work like this, you would need to have the onThrowUpdate.

 

Draggable.create(".foo", {
  ...
  onDrag: update,
  onThrowUpdate: update
})

function update() {
  ...
}

 

  • Like 2
Link to comment
Share on other sites

Definitely prefer the inertia instead of the scrub although it will add another library but it works smoother, 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.
×