Animation inside pinned panels

[dog]

hi,

I'm new to GSAP and I'm struggling to implement something I thought wouldn't be too challenging.

 

My aim is for a full screen section on a webpage to pin when it reaches the top then a series of animations to play in this  first panel.

when the animation finishes the panel slides off horizontally left and  a second panel to slide in from the right to replace it.

when the 2nd panel is in place to start a series of animations inside this 2nd panel.

when the 2nd animations have finished, the section should  continue to scroll.

 

i'm having trouble with how best to structure the timelines, the scrub and the triggers.

 

i'd be very grateful if someone could point me in the right direction.

 

many thanks

See the Pen JjbXxVW by dogstar10 (@dogstar10) on CodePen

[mvaneijgen]

Is something like this what you are trying to do? 

 

See the Pen qBqNOGM by mvaneijgen (@mvaneijgen) on CodePen

 

I've created a function of your red panel animation and `.add(timelinePanel1())` that to the ScrollTrigger timeline, when this animation is done the rest of the time line will play with the blue panel moving to the left.

[dog]

Thank you very much!
that's helped me a lot to see the better way to approach this...

 

thanks again

David