I want horizontal and vertical scroll sections together with scroll snapping

[codechirag]

Hello, wonderful community. I am working on a project where I need scroll snapping but it has horizontal scroll and vertical scroll both, I got example of horizontal scroll with snapping to next section but I am not able to do it altogether.  In this codepen only horizontal snapping is working.
I need scroll snap work for whole page includes horizontal sections and vertical sections both. Help is appreciated always 😊

See the Pen qBvbWwY by EmpChirag (@EmpChirag) on CodePen

[mvaneijgen]

Just add all your sections to the stack like the pen below and then animate each section from the direction you want. As you can see in this demo you can go wild with the direction but you can also just animate them .from() left and bottom the demo is just to demonstrate how to set it up.

 

Then you can do your same logic as you do now with the ScrollTrigger and snapping, but because all the sections are part of the animation it will work like you want. You'll need to rewrite your HTML a bit, but this is the easiest way.

 

See the Pen poYzaJW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

For a more detailed explanation check the post below. Hope it helps and happy tweening!  

 

[Cassie]

Nice styling on that pen @mvaneijgen 💜

[codechirag]

Hi @mvaneijgen, thank you very much for your response. I have one request can you modify that pen with 2 horizontal sections and some vertical sections on scroll, because I am new in GSAP and find some difficulties in understanding the combining of the code. Thanks again.

[mvaneijgen]

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools!

 

Have you check out the post I linked to, it explains everything in detail.

 

Keep in mind that the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Here is a pen with an animation from a specific direction for each card. Hope it helps and happy tweening! 

 

See the Pen ZEPWzOz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[codechirag]

Hey @mvaneijgen, here is what I have done using another pen. There are some issues like in initial section it is not fully scrolling to the next section's height (not scrolling 100vh). another issue is in the horizontal scroll it shows some glitchy transition (like while scrolling to second slide the first slide appears in a glitchy flash on the second slide and vice versa). and also is there any option to manage the speed of scroll? Thanks a lot again.

 

See the Pen ZEPWYoV by EmpChirag (@EmpChirag) on CodePen

[mvaneijgen]

Why are you searching for other solutions? It is sure great to be curious, but in this case you'll just have to create an animation for the effect you want and when that is done add it to ScrollTrigger. There are 100th of routes to the same solution, but if you are just starting out it is better to just focus on your animation at hand before you start thinking about ScrollTrigger.

 

Again the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

So please share a pen with the animation you want and tell us what is not working as expected, when we've got that under control we can talk about how you could hook that up to ScrollTrigger

 

[codechirag]

Hello @mvaneijgen, thanks for your response. the above examples are very good, however those doesn't look page scroll effect but overlapping of a section one over another. That is why I gave the last pen in which it actually looks like proper scroll of sections. Hope you understand my project's requirement. Please let me know if I can do it in your pen example as well.

[mvaneijgen]

2 hours ago, codechirag said:

however those doesn't look page scroll effect but overlapping of a section one over another

Correct, that is just an example animation. We're not here to solve your project but we hope to guide you to understand the tools better, so that you can make what ever you want with the tools that are provided.

 

2 hours ago, codechirag said:

Please let me know if I can do it in your pen example as well.

Yep you can! If you build the animation you want first before you start implementing ScrollTrigger. Again, this is just an animation, it is not the correct animation but that is fine because if you check the guide and see the examples you'll be able to build what ever animation you like an hook it up to ScrollTrigger! Hope it helps and happy tweening! 

 

See the Pen YzgqNag?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[codechirag]

@mvaneijgen, Thank you very much I will take care of the points you mentioned and will practice it. Thanks again.

[akapowl]

Hello there @codechirag

 

Since it looks to me like what you wanted was to implement snapping for every section in that example - vertically native-scrolled and horizontally fake-scrolled - I really don't think you'll have to go the way of 'animate everything' as suggested earlier here.

Snapping logic can become quite tricky, especially if you want to implement it across the board for different ScrollTriggers, but in your case I would suggest having a look at this older thread. It contains an example built by @GreenSock that shows how you can achieve what I understand it is you're after.

I hope this will help you out. Cheers.
 

 

[codechirag]

19 hours ago, akapowl said:

Hello there @codechirag

 

Since it looks to me like what you wanted was to implement snapping for every section in that example - vertically native-scrolled and horizontally fake-scrolled - I really don't think you'll have to go the way of 'animate everything' as suggested earlier here.

Snapping logic can become quite tricky, especially if you want to implement it across the board for different ScrollTriggers, but in your case I would suggest having a look at this older thread. It contains an example built by @GreenSock that shows how you can achieve what I understand it is you're after.

I hope this will help you out. Cheers.
 

 

Thank you very much for helping @akapowl