Using ScrollTrigger for horizontal scrolling sections

[servus]

Good morning from Austria!

I am very new to GSAP and i would be thankful if anybody could help me with my first issues.

 

As starting point i am using this example:

 

On scrolling i have that issue that the actual section is not immediately "snap" on the left site, it seems that it have any delay. Does anybody have an idea please?

 

Thanks!

 

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

[GreenSock]

1 hour ago, servus said:

On scrolling i have that issue that the actual section is not immediately "snap" on the left site, it seems that it have any delay. Does anybody have an idea please?

It waits for scrolling to end before snapping. Otherwise, it would be fighting with the user for control over the position. You can make the actual snapping part faster if you prefer by setting a duration like snap: { duration: 0.1, snapTo: 1 / (sections.length - 1) } but it still needs to wait for scrolling to stop first. 

 

Thanks for being a Club GreenSock member! 🙌 

[servus]

Thanks for helping! If i use your settings and play with it, the snapping is too hard. Do i have another chance to solve the horizontal scrolling with ScrollTrigger similar to a slider?

[Cassie]

Heya!

Sounds like you're not after snapping? You're probably after this kind of thing?
 

 

[servus]

Thanks Cassie! That´s what i am looking for, but in combination with pin. I have a header, main and footer section. The slider comes into main, when finishing scrolling with last slide i should be able to scroll further to footer. Is this possible with your example?

[Cassie]

Literally anything is possible with enough thought, time and custom logic applied to the problem. But unfortunately we don't have the resources to build out complete solutions in these forums.

We have a new plugin 'Observer' which may make your life easier - but Observer only observes events. It'll be up to you to write the custom logic to handle how the page behaves. Demos like this are tricky because you're taking control away from the user so a lot of thought has to go into different types of navigation. What if they're using mouse wheel, spacebar or touch screens to navigate? How do different browsers handle it?

Here's an example using observer and scrollTrigger so you can see a basic example of how you'd mix the two.

See the Pen 1ccf60146d680c09ba6074bf9132778d by GreenSock (@GreenSock) on CodePen

Hope this helps, good luck!
 

[servus]

Thanks a lot for being helpful!

[Cassie]

No worries, feel free to pop back if you start building out a solution and get stuck with Observer or ScrollTrigger. We're always happy to answer GSAP specific questions!

[Cassie]

https://greensock.com/docs/v3/Plugins/Observer Here are the observer docs btw!

[emptypockets-dev]

On 6/7/2022 at 8:06 AM, Cassie said:

Literally anything is possible with enough thought, time and custom logic applied to the problem. But unfortunately we don't have the resources to build out complete solutions in these forums.

We have a new plugin 'Observer' which may make your life easier - but Observer only observes events. It'll be up to you to write the custom logic to handle how the page behaves. Demos like this are tricky because you're taking control away from the user so a lot of thought has to go into different types of navigation. What if they're using mouse wheel, spacebar or touch screens to navigate? How do different browsers handle it?

Here's an example using observer and scrollTrigger so you can see a basic example of how you'd mix the two.
 

 

Hope this helps, good luck!
 

 

 

Is there a way to "snap" to the first red section. Unless I'm extremely careful with my scroll, the red section will always scroll past into the next purple section. It would be great if there was a way to make that a bit smoother. 

[GSAP Helper]

I'm not quite sure what you mean - the purple section isn't even next to the red one. I have no problem scrolling to the red section, so I must be missing something. Can you be more specific and provide a minimal demo please? It's probably best to start a new thread too rather than hijacking one that's 8 months old.