Scroll Trigger Vertical to Horizontal scroll

[ninmorfeo]

Hi everyone,

I've been losing my mind for 3 days, I still haven't found the solution, I've done dozens and dozens of tests and come up with dozens and dozens of examples but nothing, what I attach is what I managed to do that comes closest to the result I would like to achieve.

 

In practice I have a scrollTrigger that is activated for the primary vertical sections and one that should be activated for the horizontal ones and I would like it to happen via the mouse scroll (therefore without using the sidebar which I control in a different way, with observe, so in case you do some tests do not use sidebar).

 

What I see is that even if the horizontal section has been pinned, the vertical section trigger continues to scroll the page (probably it should be paused until the far right of the slides is reached, but I haven't found any directives to accomplish this task).

 

I would like once the scrolling of the horizontal section ends that the normal vertical trigger will start again.

 

In reality I didn't even understand the end of the trigger of the horizontal section, what is it for since I thought it referred to the total width of the slides but this is not the case because the scroll trigger if it is not defined as horizontal: true does not accept even the left and right...

 

I'm stuck and I'm about to give up.

 

My question is simple: how the hell do you do it? I hope the answer is as simple and I'm simply missing something. 

See the Pen eYxXOEg by ninmorfeo-the-bold (@ninmorfeo-the-bold) on CodePen

[Toso]

Hi @ninmorfeo  as I can see you are trying to mix vertical and horizontal scrolling with the observer,

did you see those demos? 

 

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

 

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

 

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

 

I hope that helps, let me know the result 

 

 

[ninmorfeo]

in 3 days I think I saw all the pens on codepen...the best I managed to do is what you see in the pen I attached.however, I had already seen them and they all have only one trigger in common, I have not found examples of triggers that iterate with each other. IN practice they all have a section that breaks the triggers, while I have sections that use both in theory

[Rodrigo]

Hi,

 

I've read your post a few times and looked at the first demo you posted, but I'm still not clear on what exactly you want to do here, maybe I'm missing something here, sorry.

 

Would you mind explaining in the simplest possible way what exactly what you're trying to achieve?

 

Happy Tweening!

[ninmorfeo]

Well I would like the trigger that scrolls the sections vertically to stop when it finds the trigger of a horizontal section and if you continue to scroll with the mouse wheel they begin to scroll the sections horizontally, which I called slide for convenience, we want to call them tabs but they are divs in all respects equal to the main sections only that they should scroll horizontally in the same way I move between the vertical sections, after which once I reach the far right the normal vertical flow begins again; by scrolling between the vertical sections you can re-propose horizontal sections which should always resume the same behaviour.
In practice if I could have simply defined a horizontal:true when presenting these horizontal sections it would have been simple but I saw in the documentation that one excludes the other since the whole window is affected. I also tried this but it doesn't work.
Basically in the examples I've seen an End is defined which I can't even understand since it doesn't refer to the right or left edge of the div which starts to scroll horizontally.
I currently only use the observe to disable the trigger in case a user uses the vertical scroll bar and re-enable it if they start using the mouse wheel again.

[Rodrigo]

Hi,

 

Probably I'm still having a few issues to visualize this the way you intend, sorry about that. For me it would be as simple as to create three different sections. First section with vertical elements, a Second section with horizontal elements and a Third section with more vertical elements. Create the ScrollTrigger instances in that particular order and pin them (if necessary) to shift the start/end points correctly.

 

If you somehow want to overlap this sections or maybe make the horizontal sections to reside inside a vertical section, yeah that's mostly an HTML/CSS challenge that you should tackle first. Once you have that sorted out create one or more GSAP animations that actually do what you're looking for and then, when everything works as expected, add ScrollTrigger to the mix. In complex scenarios starting with ScrollTrigger from the beginning, normally creates more issues than it solves, is better to just create the layout, then the animations and then add ScrollTrigger.

 

Also I see that you're trying to implement some snapping into this, that won't make things super easy as well, maybe implement snapping using the onEnter/onLeave callbacks in the sections that need such feature and perhaps omit it in the section that has the horizontal content.

 

As I mentioned, and most likely can be extracted from this post, I'm pretty sure that I don't follow what you're trying to do here.

 

Happy Tweening!

[ninmorfeo]

Sorry, maybe I'm the one who doesn't explain myself well in terms of what I want to do since conceptually it's a very banal thing.

 

In the pen I attached you can see that when i pin section 2 which contains the slides that should have a horizontally scroll, 2 unwanted things happen: first the focus of the scroll does not pass from the window to the section with css properties overflow: auto.... not even if I put overflow:scroll; this means that continuing to scroll with the mouse wheel or scrolling bar  continues to scroll the main window instead of scrolling the horizontal section; the second is that the automatic scroll of the horizontal section skips all the slides and positions itself at the last one, but here I am the one who didn't bother to fix it because I can't resolve the first point.

In the examples that the other user attached I see that the End property of the scrolltrigger is used with a static value for example end: "+=2500" which I don't understand what it is for since this value should tell the scrolltrigger to finish the animation horizontal when the user scrolls the mouse wheel or the sidebar for another 2500 pixels? why? is it just a fake number to alow to complete horizzontal animation ? in practice this "end" does not refer to the far right of the horizontal div, which I thought the scroll trigger plugin would handle for the sections set as horizontal: true, which instead should be set by default, you have to decide if your site has a vertical or horizontal navigation, i.e. I cannot mix the 2 behaviors.

[Rodrigo]

Native scrolling works differently horizontal and vertical when using either the mouse whell, touch pad or fingers on a touch screen. With the mouse wheel you have to hold shift in order to scroll horizotally, in the touch pad of a laptop you have to use the two fingers gesture left-to-right and in a touch screen the same thing with the finger element, so using just the mouse wheel will never scroll horizontally only vertically, that's maybe why the end point you're passing is not working as you expect.

 

As I said before, the best approach here is to setup everything to use just vertical scrolling as shown in many demos here in the forums and the codepen collections we have for ScrollTrigger:

https://codepen.io/collection/AEbkkJ

https://codepen.io/collection/DkvGzg

 

Hopefully this helps.

Happy Tweening!

[ninmorfeo]

I understand so it's something that is less natural than I think. In theory, therefore, the only way would be to pin (fix) the sections below the horizontal one, after having reached the right edge of the same (without relying on the scroll trigger functionality), restore the normal flow by putting all the sections back into relative positions. OK thank you