Grid Layout Transition to horizontal slideshow

[gsapnooby]

I am trying to create an animation where grid tile will expand take full width and become horizontal slides. But as you see in the codepen, only part of the animation is working. 

 

Animation sequence 

1. Section text moves away to the left

2. While section text is moving away to the left Div A expands and take the full width. Meanwhile Div B and Div C moves aways to the right without getting rezied 

3. Div A, Div B and Div C appears one by one on scroll  

 

I took the code from this codepen to create horizontal slides but that's not working either

See the Pen MWBMxwy by yumelabs (@yumelabs) on CodePen

[Cassie]

Hi there,

 

I think making a master timeline is muddling things a little.

Master timelines are great when you have a really long timeline made up of separate parts that's starting to be hard to understand.
This is a good example

See the Pen eYzOBGq?editors=0010 by cassie-codes (@cassie-codes) on CodePen

Also - You shouldn't nest Scrolltriggers.

Right now you're adding timelines with scrollTriggers, to a master timeline that's controlled by a scrollTrigger. That's going to cause issues.

What I would suggest is to create a timeline that does what you want first without ScrollTrigger - Then add scrollTrigger. Here's a starting point.

See the Pen qByexJR?editors=1010 by GreenSock (@GreenSock) on CodePen

Don't copy paste code from different codepens, try to work out what you need for your specific use case. 

[gsapnooby]

HI Cassie , thank you so much for the reply. 

 

Can you just also guide me to trigger Div A, Div B and Div C move on scroll one at a time, first scroll moves Div A, second scroll moves Div B and then Div C. ? 

[Cassie]

I'm afraid I don't really grasp what your end goal is, maybe you're looking for snapping.
 

I stand by what I said before though. Create the animation first, then hook it up to scroll. We can help you with that bit once you have the animation!

[gsapnooby]

Oh! let me try again - 

As you see in the image Div A expands and becomes full screen. B and C come into the view one at a time when user scroll, one by one.