Horizontal Scroll + swipe on mobile

[TerraHQ]

Hello there!
 

A few weeks back, I initiated a discussion regarding responsive horizontal scrolling, which you can find here (TSM Carl for your help).

I'm providing original pin from Carl.

However our client has expressed an interest in exploring the possibility of enabling users also to to swipe from right to left once the content is pinned, creating a more conventional scrolling experience for mobile/touch devices.
 

Is this a feasible  to implement? in case of not, why? 
I've scoured the documentation but haven't come across any relevant information on this specific matter.

Thanks in advance

See the Pen PoxojaO?editors=0110 by snorkltv (@snorkltv) on CodePen

[mvaneijgen]

I would look in to the Observer plugin and watch for pointer and touch events. Then onDrag on the X axis use the scrollToPlugin to scroll to the amount dragged. 

 

Here a quick setup, the drag direction probably needs to be flipped and you probably want to find a good number to multiply the move distance by, but this is a quick working example. Hope it helps and happy tweening! 

 

See the Pen eYbMRNp?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[akapowl]

 

Hello there, @thunderfoot.

 

1 hour ago, thunderfoot said:

Is this a feasible  to implement? in case of not, why? 
I've scoured the documentation but haven't come across any relevant information on this specific matter.

As Mitchel showed above, it sure is possible to implement that functionality.

GSAP is a toolbox that provides all the tools that you'd need for that - combining them will come down to your creativity as a developer in the end.

 

For getting a grip on individual plugins, the docs for sure are the right place to look, as they mainly focus on how to use each and every single one of those plugins (or the core of GSAP). But if you want to combine multiple of those tools, just having a look at the documentation might not be enough anymore. I personally (although I can not speak for GreenSock) don't think having examples for any given combination of plugins in the documentation would make too much sense, as that would bloat it up quite a bit - and it's a good thing to keep the docs as concise as possible.

If you ever need inspiration for how to possibly get a grip on something that you might not find examples for in the documentation, I'd strongly suggest bookmarking GreenSock's collections on codepen. You'll find some neat examples in the showcase collections, and lots of usecases regularly asked about on the forums in the How-To Collections.

 

This example using Draggable, for instance, is from the ScrollTrigger How-To Pens.

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

 

 

 

And this example using Observer is from the Observer Showcase. This one does include ScrollSmoother on top - but you could probably use the basic approach of the logic and re-work it slightly for useage with native scroll.

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

 

 

You see, there are multiple options you have - finding the one that best suits your needs will be up to you, though.

And depending on how exactly you want things to behave, you might even run into some roadblocks, that you'll need to work around by utilizing tools outside of GSAP or with some accompanying logic of your own, as touched on in the thread below with regard to multi-touch support.

 

I hope this will help get you started. Stay curious and good luck with the project.

 

 

[TerraHQ]

hey @akapowl @mvaneijgen - tried a few options but is not working as expected.

See the Pen WNLgLxY?editors=1010 by amaiaTF (@amaiaTF) on CodePen

Scrolling down works perfectly, but on touch it does not - Any tip that you can provide ?

[mvaneijgen]

You've set   type: "touch" which only will work for touch devices, I think you also want to add pointer (see my original pen) if you also want to allow dragon with a mouse. 
 

 

[TerraHQ]

hey @mvaneijgen

I've made the changes that you requested but this feels off.
onDrag: (self) => {
    console.log(self.deltaX);
    console.log(self.deltaY);
    let horPos = Math.sqrt(self.deltaX * self.deltaX)
    let verPos = Math.sqrt(self.deltaY * self.deltaY)
    if(horPos > verPos) {
      gsap.to(window, {
        scrollTo: {
          y: `-=${self.deltaX * 10 }`,
        }
      });
    } else {
      gsap.to(window, {
        scrollTo: {
          y: `-=${self.deltaY * 2 }`,
        }
      });
    }
  }
So, on my phone's acting all funky – the touch isn't quite doing its job smoothly. I think I might be making things way more complicated than they need to be. check

See the Pen WNLgLxY by amaiaTF (@amaiaTF) on CodePen

link from your phone.

Try swipping both directions.

[Rodrigo]

Hi,

 

I tested your example in the debug URL (no iframes) on an android phone and an iPad:

https://cdpn.io/pen/debug/WNLgLxY

 

And it works pretty much the way it should.

 

Finally these are redundant:

let horPos = Math.sqrt(self.deltaX * self.deltaX)
let verPos = Math.sqrt(self.deltaY * self.deltaY)

Multiplying something by itself and then getting the square root of that result is the initial value:

a * a = a2
Math.sqtr(a2); // -> a
Math.sqtr(a * a); // -> a

So you can just use self.deltaX and self.deltaY and you'll get the same value without wasting the extra CPU cycles to perform the calculations.

 

Hopefully this helps.

Happy Tweening!

[TerraHQ]

Hey! - Many people have dedicated significant efforts to solving this problem, but unfortunately, I haven't been able to fix it. If anyone could provide a complete example on CodePen, I would greatly appreciate it.

 

If not, I will attempt to address it myself.

Thanks #community.

[TerraHQ]

hey @Rodrigo been working around this, any tip on how to fix it?
Can't be the first person I'm facing this. 😰

Thanks in advance!

[Rodrigo]

Hi,

 

Sorry to hear about the problems I can understand that is no fun at all 😞, but as I mentioned before your latest demo is working in the way it should as I tested it on android and ios devices, so beyond that there is not much we can do if the demo doesn't clearly replicates the issue you're facing. At that point we can only assume that something else in your actual app could be causing this 🤷‍♂️

 

Happy Tweening!