Jump to content
GreenSock

darkgr33n

horizontal scroll trigger -- tablet / mobile

Go to solution Solved by ZachSaucier,

Recommended Posts

Hey all,

 

I've had a lot of help (thanks Visual-Q!) to get to this stage, but I'm a little bit stuck again [o.O]. I thought I'd start a new thread to keep things focused.

 

I've built a horizontal scroller, which works pretty well on desktop, but I can't get my head around what i need to do to be able to swipe horizontally in order to move the scroller  on tablets/mobile.

 

Currently, you have to swipe up/down and the scroller with move horizontally which is bad ux obviously.

 

I've tried messing with horizontal:true but I'm not able to quite grasp what's going wrong and and i hoped someone could give me a shove in the right direction.

 

If you're using dev-tools and set the pen to ipad size you can see the effect. 

 

 

I assume because we're setting the height in the createScroller function, this screws up the mobile as when markers are true i can see them going vertically, but I just can't get my head around a solution. I have tried resetting the body.height inside the ScrollTrigger.MatchMedia calls but that fails miserably.

 

I've looked through a ton of horizontal examples but they all seem to work the same on tablets - swipe vertically to move horizontally.

 

for example:

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

 

Any ideas ?

 

Cheers!

See the Pen RwaJEvj by darkgr33n (@darkgr33n) on CodePen

Link to comment
Share on other sites

Hey darkgr33n. This is because what is going on those demos is fake horizontal scrolling. Your options are to 

  1. Use real horizontal scrolling in which case you'd need to affect the mouse wheel to scroll horizontally instead of vertically.
  2. Create some horizontal dragging functionality that actually moves the page vertically. This is probably the way that I'd go about it. You should probably use a proxy element, meaning an element that's not actually visibly seen on the page (most likely that you create with JS). You want it to cover the whole width of the page and not actually have the element move when it's dragged. I don't have time at the moment to set that up for you.
  • Like 1
Link to comment
Share on other sites

Thanks Zach;

 

I think I see what you mean on option 2 - although are you thinking that i would use scrollTrigger for desktop, matchMedia to turn it off for touchscreens, and then some kind of device using Draggable to cope with tablet/mobile ?

 

I must admit I don't really recall coming across many examples of horizontal scrolling that also work on ipad. As per my other thread, I did also look at @PointC horizontal scroller, which does work on iPad, but wasn't using scrollTrigger. Perhaps I'd be better off trying to get scroll trigger working in there. I'll have a go but dragging works well:

 

See the Pen WNwJEOL by darkgr33n (@darkgr33n) on CodePen

 

 

Link to comment
Share on other sites

7 minutes ago, darkgr33n said:

are you thinking that i would use scrollTrigger for desktop, matchMedia to turn it off for touchscreens, and then some kind of device using Draggable to cope with tablet/mobile ?

I'd just let ScrollTrigger and Draggable work together on all devices most likely.

Link to comment
Share on other sites

ah ok. i was hoping to turn off dragging on desktops but if it's not insignificant i may just have to go with it. 

Cheers!

 

Link to comment
Share on other sites

5 minutes ago, darkgr33n said:

i was hoping to turn off dragging on desktops

Sure, it's possible. But it's hard to define "desktops". There are "desktops" that have touch screens.

  • Like 1
Link to comment
Share on other sites

 

13 minutes ago, darkgr33n said:

i was hoping to turn off dragging on desktops

 

You also have to think about a very large tablet like the ipad pro which I believe resolves to 1366px wide logical width in a browser in landscape so it's well into desktop range so it would be difficult to target all tablets just by media size.  

  • Like 3
Link to comment
Share on other sites

Thanks both!

yes, really good points, and perhaps it's no big deal with regards to UX to be able to have draggable across the board. I've not really used it yet, but I can see that you can play with the minimum movement required to recognise a click from a drag, so that probably covers my main concern with that.

 

I'll try and use the @PointC demo a I edited a couple of posts up as reference to allow me to add draggable to my original scroll-trigger powered pen, which I can see never showed up in the post for some reason. 

 

See the Pen RwaJEvj by darkgr33n (@darkgr33n) on CodePen

 

Thanks for your help guys - i've just been given a four week deadline so better get my a** moving!

 

Cheers!

 

Link to comment
Share on other sites

Hey Zach, that's amazing,  thank you! 

I had added the draggable call OK but was struggling with getting my head around the proxy and updating. Will break it down during the build and make sure I understand it going forward.

 

Again, many thanks!

 

Cheers!

Link to comment
Share on other sites

Holy Cow! So you can create an element and not add it to the rendered html and it's still a valid selector that you can access and append attributes for.

 

That's awesome.

  • Like 2
Link to comment
Share on other sites

I know I thought the same! A bit of pure genius. It would have taken me days/weeks to work that out!

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hey,

 

I'm getting near the end of my project but have come across an issue I'm not sure how to resolve in the below. 

I'm a PC user and t's working on PC and also on a Mac with a normal mouse, however during final testing a Mac user with a Magic Mouse has indicated that it doesn't work as expected. As a PC user I had no idea such magical items existed, but in essence, there is no physical wheel on a Magic Mouse and you're able to use it to scroll vertically and horizontally just by swiping the surface of the mouse. As such, they are expecting to be able to scroll the page horizontally by using their horizontal swipe - but of course as we're fake scrolling, they have to swipe vertically to move the page horizontally.

 

The question is: is there an easy fix for this ? 

 

Obviously, with a week to go before launch, I'd like to avoid a complete rewrite given my GSAP skills are still in their infancy, but perhaps the only way is to actually use some script to take control of the mouse wheel and change the way the way it fires and have a real horizontal element.

 

It's hard for me to test as I'm not a Mac user, but the demo below works fine for me on PC, and works if you swipe vertically on a Magic Mouse. Are there any Magic Mouse users that have found a solution to this ?

 

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

 

Cheers!

 

 

Link to comment
Share on other sites

Hey darkgr33n. We need some more context. 

 

Is there content before and after this component? If so, does this section pin while scrolling horizontally? 

Link to comment
Share on other sites

Hey Zach,

 

Thanks for your reply.

 

No, there is no content before or after this scrolling content. 

It's basically a landing page, and when you click on any of the sections within the scroller, it then goes to that specific page, so in that sense it's standalone.

 

Hopefully that's a good thing!

 

Cheers!

 

Link to comment
Share on other sites

The issue is logical. In reality: the page currently only scrolls in the y direction. So to change that you have two options:

  1. Try to detect if someone is attempting to scroll horizontally. If they are, switch the scrolling to horizontal instead.
  2. Try to detect if someone is attempting to scroll horizontally. If they are, try to move the page vertically as far as they are scrolling horizontally.

I've never actually tried to implement something like this myself. I would guess that option 1 would be easier. But the only way that I'm aware of detecting if someone is able to scroll horizontally via touchpad/mouse is if they actually try to do so. So you would have to listen for the wheel event and if the deltaX is greater than 0 then switch to horizontal scrolling. That kinda stinks because you would have to change things are they're trying to scroll. But I'm not currently aware of a way to detect horizontal scrolling without the user trying to scroll. 

Link to comment
Share on other sites

Hey Zach

 

I was afraid that would be the case 🤢

 

I didn't know Magic Mice existed when I embarked on the project - and it was working beautifully on PC and iOS/Android. 

 

Gutted.

 

Less than a week to go before launch - I have no option but to rebuild so I guess I'll have to use some kind of scroll jacking and have a real horizontal scroll.

 

I'll still be able to use GSAP on the internal pages but looks like I'll have to try and find another way for the landing page!

 

Thanks for taking the time to reply though.

 

Cheers!

Link to comment
Share on other sites

5 minutes ago, darkgr33n said:

I didn't know Magic Mice existed when I embarked on the project

There are other types of mice that also allow horizontal scrolling. And laptop touchpads.

 

6 minutes ago, darkgr33n said:

I have no option but to rebuild so I guess I'll have to use some kind of scroll jacking and have a real horizontal scroll.

You could add a visual indicator of which way to scroll. Or one for dragging. Or just let the user figure it out :) 

Link to comment
Share on other sites

22 minutes ago, ZachSaucier said:

There are other types of mice that also allow horizontal scrolling. And laptop touchpads.

 

I kind of fell into the project and hadn't considered much beyond what I was aware of 😕 I should have researched more. Lesson learnt!

 

22 minutes ago, ZachSaucier said:

You could add a visual indicator of which way to scroll. Or one for dragging. Or just let the user figure it out :) 

That is an interesting option. Not sure how many people have 'alternative' input devices, but I suspect more than I had bargained for! 

 

Dragging works quite well, and I do like the 'figuring out' option. Unfortunately the client had seen the buildinamsterdam site which works well for all input devices but i'm not skilled enough to properly decipher how they're doing it. I'd seen they were using GSAP and kind-of assumed I'd be able to do something similar. Close, but no cigar 😕

 

I'm thinking perhaps the vanilla wheel object could be the way to go but without manual transforms I'd lose a lot of the polish that GSAP allows. At least easily, anyway. I've seen a few normalising-wheel type scripts to try and cope with the differing deltas etc, but was hoping it wouldn't be necessary.

 

Cheers! 

Link to comment
Share on other sites

2 hours ago, darkgr33n said:

After a user starts scrolling the scroll direction is locked.

 

You could do something similar with GSAP and the mousewheel event. Here's a quickly created demo that seems to do a pretty good job (without even the need for locking it to one axis):

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

  • Like 1
Link to comment
Share on other sites

Zach,

 

Absolute Genius!

I didn't know you could clamp the mouse direction in that way.
Tested this morning on a macbook and imac - both with magic mice - and the reports are that it works perfectly! Buttery even.

Thank you so much for this. Those seven lines of code made my day - and means I'm back on track.

 

Cheers!

 

 

Link to comment
Share on other sites

Definitely do some testing on as many devices with horizontal scrolling as you can, as I said I didn't do very much :) 

Link to comment
Share on other sites

:)

 

No you didn't do much - only completely saved the day!  🦸

 

I will try and see if I can find some trackball users - in fact I should do a search for all types of input device - but it's a reasonably targeted industry audience and I don't think there's many that stray too far from a mouse :) 

 

Cheers!

 

 

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