Jump to content
GreenSock

darkgr33n

Horizontal scroll trigger + click

Recommended Posts

Hi,

 

This is my first GSAP project - a horizontal content page with scrolling and next/prev navigation. The idea is to have a variable width container holding a number of sections (each section @ 33%.3 vw) that can be scrolled with either the scroll wheel or on click. Movement via the scroll wheel is free, whereas the buttons should advance (or retreat) three sections at a time (screen width) except if the width is not divisible by three, then it would just move by the remaining amount.

 

Using the various posts on the forum, I thought I was progressing reasonably well, and  I've managed to get both navigation options working, however I've just realised that during the various battles I've been fighting, I made a fundamental error. 

 

I've ended up creating two separate timelines for one scroller 😕

 

And, of course, they don't play nicely together. If you advance using the buttons and then switch to the scroll wheel - or vice versa - as they are obviously not aligned.

 

I think I need a way of allowing the button clicks to know what the current position of the scroller is. 

Or I might have gone down the wrong track completely!!

 

Could anyone steer me in the right direction please ?

 

Thanks!

 

 

 

 

 

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

Link to comment
Share on other sites

Hey dark,

 

The problem is scrollTrigger is looking at doc scroll position so when you separately animate the elements it is out of sync because the window hasn't scrolled.

 

I can think of a few to approaches this which you would have to work out the mathematical relationships for:

 

1. Use the scrollTo plugin to animate the window position for prev next instead of just the x pos on the elements. Then you actually animate through the original scrollTrigger.

 

https://greensock.com/docs/v3/Plugins/ScrollToPlugin

 

2. Add an id to the scroll then you can use .scroll to get and set the scroll position after the element animation to match where it should be in scrollTrigger something like ScrollTrigger.getById('myId').scroll(dothemath)}. 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroll()

 

3. I think you could also use snap here but I haven't had an opportunity to try it out yet so I'll leave you to investigate that. Maybe some of our scrollTrigger veterans can weigh in on this?

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

  • Like 3
Link to comment
Share on other sites

Ah yes, of course - I hadn't taken into account the actual document scroll position. A fundamental error - just a different one than the one I thought I'd made, lol.

 

Thanks for the pointer - and the links. I'll do some reading and re-think my approach a little,

 

Cheers!

Link to comment
Share on other sites

Just given the ScollToPlugin a go, and it seems to work pretty well :) I'll need to work on the actual math a little to get it spot-on, but it certainly gets me a lot closer!

 

I may actually have a look at #2 ScrollTrigger scroll() as well as that sounds like it could be a little easier to be precise, but thanks for your help, it's given me the push I needed I think.

 

Here's an updated pen:

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

 

Actually, it seems touch isn't working on iPad and i'm unable to swipe. Will have to look at that as well.

* EDIT: swiping does work, i have to swipe vertically in order to scroll horizontally on the iPad so I definitely need to fix that!

 

Cheers

Link to comment
Share on other sites

Well, I'm not sure where that week went!

 

I've been fighting with scrollTo, trying to get my page acting in an expected fashion, and I'm kind-of there - I think.

It needs a little more finesse around the final positioning of the sections - so the three sections shown are always centred - but compared to where i have been this week, it's a step forward at least. I've been out of the coding game for a while and it's taking more time than i had originally hoped 😕

 

BUT,

 

I'm still not sure about rocking two timelines and then hacking them so they (almost) keep up with each other, so the question is:

is it valid to have two timelines controlling one container -- or is there a more efficient way of controlling it ?

 

Here's an updated codepen using scrollTrigger expanded from my original posts:

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

 

As part of the journey, I've tried to look at other possible methods of achieving what I'm looking for.

 

I spent a fair bit of time with something based on @PointC's very helpful Fullscreen sliders horizontal and vertical.

 

It only had one timeline, so I adapted it to the three-section design.

 

I like that it uses the wheel event as I find it easier to visualise whats going on, however I'm not experienced enough to be able to code it so that, when the wheel is used, it moves smoothly across the width of the container -- rather than snapping one section at a time. It also has draggable which is nice and smooth and also works on touch devices, which the scrollTrigger one above doesn't yet do. I need to read about MatchMedia. 

 

But anyway, here's a codepen using 'wheel' with buttons and drag:

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

 

Before I embark on trying to work out how to get my scrollTrigger version working on mobile/tablet, I just wanted to make sure that I'm not barking up the completely wrong tree!?

 

For a bit more context, in case there's a whole other way, I'm trying to emulate the quite fantastic buildinamsterdam.com, albeit rather crudely. 

 

Cheers!

 

 

 

 

 

  • Like 1
Link to comment
Share on other sites

11 minutes ago, darkgr33n said:

I just wanted to make sure that I'm not barking up the completely wrong tree!?

 

Seems like you're going in the right direction to me :) 

Link to comment
Share on other sites

You might have to do some additional modifications but you could do the calculations differently setting a series of stopPositions for the scrollTo calculated to match the number of sections and then move forward or back to targets (in this case three sections) based on a comparison to scrollTrigger scroll() position, something like this. Pardon my old school js I still haven't caught up to all the cool kids using ES6.

 

See the Pen OJNZOPN by Visual-Q (@Visual-Q) on CodePen

 

Note: I know there's still an equation lurking around that would take in the scrollerwidth, sections length and scroll() position and spit out a number directly without the array and loops but I haven't wrapped my head around it yet. Maybe I'll have an epiphany but anyone else feel free to weigh in on this.

  • Like 2
Link to comment
Share on other sites

On 9/11/2020 at 11:11 PM, ZachSaucier said:

Seems like you're going in the right direction to me :) 

 

Thanks Zach, that's reassuring to hear!

 

19 hours ago, Visual-Q said:

You might have to do some additional modifications but you could do the calculations differently setting a series of stopPositions for the scrollTo calculated to match the number of sections and then move forward or back to targets (in this case three sections) based on a comparison to scrollTrigger scroll() position, something like this. Pardon my old school js I still haven't caught up to all the cool kids using ES6.

 

Note: I know there's still an equation lurking around that would take in the scrollerwidth, sections length and scroll() position and spit out a number directly without the array and loops but I haven't wrapped my head around it yet. Maybe I'll have an epiphany but anyone else feel free to weigh in on this.

 

Thanks V-Q :)

 

The idea of stop positions was really helpful and thanks for forking the pen to show. Also adding an id to the scroll trigger i can see is helpful and didn't know you could do that.

 

I had a play with your updated pen but it seemed to lose the prev position on occasion. for example, when cycling right to the end and then clicking back, but it gave me a kick in the right direction .

 

I tried a few different methods, but I ended up with a function that finds the closest two stop positions to the current scroll position and then works out which one is closer and uses that as the basis for buttons. it seems to work better visually that way - so if you've scrolled over halfway past a section, it will move three sections from the right x of that section; if you've scrolled under halfway, it uses the left x.

 

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

 

I think it seems to work OK but I'd still be interested to find out what that equation was ;)

 

EDIT: ... actually, I've just realised I also need to reset the stop positions in the event of a resize. Added a quick function to do this but I might have been able to do it a bit better.

 

Onto trying to get it to work on mobile/tablet next. The fun never stops!

 

Cheers!

  • Like 1
Link to comment
Share on other sites

Looks good... yeah I see that the logic fails on mine in the final position, your logic seems to work though so no reason for me to revisit it.

 

Main take away is how you can use scrollTo together with scrollTrigger so you can both scrub and tween through a scrollTrigger animation, and use scrollTrigger.scroll() to always know where you're at. Which I think is a pretty good solution.

  • Like 1
Link to comment
Share on other sites

Yes, thank you, really appreciate your help getting me going. 

It seems to work pretty good so far with what I have at the moment!

 

I have today started looking at getting it to work on touchscreens - tablet/mobile.

 

Using MatchMedia I can turn off the scroll trigger on mobile - and alongside a css change - can make it so the you swipe vertically on a mobile as you would in a normal long page, but I can't yet get my head around what I need to allow you to swipe horizontally on the iPad.

 

I'm guessing I need to add draggable maybe ? or should I be killing something ... o.O

At the moment I have it so that iPad does work but you have to swipe vertically on the iPad to get the scroller to move horizontally

Perhaps there's a setting I'm missing ? 

 

I can post a pen, but my iPad is too old for codePen so have been messing locally - i just thought someone may recognise the signs and know a simple answer!

 

Cheers!

 

 

Link to comment
Share on other sites

I've never used draggable so someone else would have to weigh in on that:

 

Here is a post with a discussion of draggable and scrollTrigger though:

 

 

  • Like 2
Link to comment
Share on other sites

Thanks for the link. 

 

I had read a few posts on implementing draggable, but I wasn't sure if I needed to, as it does scroll horizontally without it, its just you have to drag vertically in order to move horizontally on a tablet. I guess I don't really yet understand exactly how scroll trigger is doing what its doing.

 

will keep reading!

 

Cheers!

Link to comment
Share on other sites

You might just be able to change the configuration for tablet and go with normal document side scrolling, without scrollTrigger for tablet. I don't have a tablet to look at this but it works on desktop as expected. You'd have to provide alternate logic for the buttons, but matchMedia and css breakpoints should allow you to set it up that way just for tablets and use scrollTrigger/scrollTo etc on desktop.

 

See the Pen xxVzVBj by Visual-Q (@Visual-Q) on CodePen

Link to comment
Share on other sites

good shout ;) I just tried that and it does actually work ... but there's no inertia or anything, so it feels a little dead - and nothing like the chrome dev-tools version of scrolling which works quite well, but on the actual tablet, as soon as you stop swiping the scroll stops dead too.

 

I had look at the post on draggable that  you indicated, and i can see that it may work well. I can't quite work out the "bounds" setting yet.

If i set no bounds at all, it does work but, of course, with no bounds i can drag in any direction whatsoever, so not quite what i want, but any other setting seems to restrict me to only being able to scroll to the right which just moves the container off screen, but I think it could work .... with  a little more persuasion!

 

The only thing is I don't want draggable active on desktop sized screens, only on touchscreens and i couldn't see a matchmedia in the docs similar to the one scroll trigger has, but I need to read more and experiment a bit before I even know if that's just me being stupid or not.

 

I love the feel of draggable, it really is spot on --  i just need to reign it in a bit.

 

Cheers!

Link to comment
Share on other sites

Still playing with ScrollTrigger, and by setting horizontal: true and changing the start and end props, I think I may be able to achieve what I'm looking for without using draggable. Setting markers: true helped me see that I should be able to sort it. I'll post something if I get there :)

 

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