Help Triggering Animation In Scrolltrigger

[BearsFan11]

Hi, beginner here trying some ScrollTrigger, and I am having trouble figuring out how to trigger a seperate animation at a certain point.
The desired effect here is to move the third slide just like the 2nd slide, with the X values of the item and it's inner wrapper set to be inverses.  

 

However, for the third slide, I can't seem to figure out how to tell it to only start the inner div animation until the second one completes.  I know this may not make sense, but I basically want the effect of slide 1 to slide 2 (the wipe effect?), repeated for slide 2 to slide 3.

Can anyone possibly steer me in the right direction, show me an example possibly?  Thanks!

AC

See the Pen eYMLorV by BearsFan11AC (@BearsFan11AC) on CodePen

[GreenSock]

It looks like you have various problems with your CSS like your slides aren't positioned on top of each other. And your ScrollTrigger/animation code looked problematic too, like loops where you didn't need to do them and also places where you should loop and didn't. I assume you were looking for something more like this?: 

See the Pen MWVPbyG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[BearsFan11]

Thank you Jack, that is what I was after, yes.   Appreciate the help, I will dig into this until I understand it, thank you!

 

Bearsfan

[BearsFan11]

Hi, thanks.  Can you help me figure out how I can put another section below and have it PIN and UNPIN at the right spot?  

I am struggling to figure that part out, thanks!

[Cassie]

Have you watched the tutorial video on scrollTrigger? There's a section on pinning that should help you grasp how it works!
 

Introducing ScrollTrigger for GSAP from GreenSock on Vimeo.

[BearsFan11]

Updating, I have solved it.   Thank you both very much for the help!