Horizontal scroll with Draggable

[pixelarchitect]

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

[akapowl]

 

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

 

[GreenSock]

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

 

[akapowl]

 

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

 

[pixelarchitect]

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!

[GreenSock]

37 minutes ago, pixelarchitect said:

@GreenSock & @akapowl you guys should wear capes!

You say that as if we don't. 

 

🤔

[pixelarchitect]

See the Pen wQqWOw by sandhie (@sandhie) on CodePen

[pixelarchitect]

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?

[akapowl]

 

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.

 

 

[OSUblake]

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

 

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

function update() {
  ...
}

 

[pixelarchitect]

Definitely prefer the inertia instead of the scrub although it will add another library but it works smoother, thank you!