Zig-zag scrolling

[dg2000r]

Hi

I've created a horizontal scroll-triggered layout, based on the GSAP demo (see Codepen), but would now like each panel to contain more content than I can fit in a single 100% height panel. I'd now like to extend it so I can scroll down the first panel, then when it gets to the bottom of that, to scroll sideways and see the top of the second panel, then scroll down that to the bottom before scrolling sideways to the third panel and so on. 

The attached image shows what I mean - either of the 2 solutions would work - as I'm still new to GSAP, I'll go with whichever is easier for now.

I suspect it's a fairly simple problem to solve, but I'm not sure where to start, so any pointers would be great!

Many thanks

 

 

See the Pen KKQjbxV by dg2000r (@dg2000r) on CodePen

[akapowl]

 

Hello @dg2000r - welcome to the GSAP forum!

 

Have a look at these two threads, they have suggestions for how to possibly handle a scenario as you imagine.

 

This one tries to show something resembling your Option 1...

 

 

 

 

 

...and this one comes closer to your Option 2 with the suggestions it has.

 

 

 

 

2 hours ago, dg2000r said:

I suspect it's a fairly simple problem to solve

 

But please keep in mind, that all suggestions made in those threads are suggestions in the first place - they are not 100% ready-to-go custom-code-solutions, as more complex scroll-triggered layout animations like these take a fair amount of thinking for how to get there in the first place and would need even more consideration in development, to cover all possible sorts of scenarios you might run into when using them.

 

 

I would probably go for this one (resembling your Option 2) as it should be the easiest and most reliable as it is.

 

I hope this will help - happy tweening!

 

 

[dg2000r]

This is amazing @akapowl - That's exactly what I was looking for. Thanks so much for your help!