Horizontal ScrollTrigger - animate elements within a panel

[VikAPAD]

I have my overall horizontal scrolling timeline working the way I want it but now I am moving on to animating some of the elements inside of the panels and I'm having a tough time trying to figure out how to make that work. For example, my second panel has an ID of section-2

 

I would like for the background(which is an image inside an absolute positioned container)  to start with a scale of 0, the h2 to start to the left of it's final position and the h3 to start to the right. Then once the left edge of section-2 hits the left edge of the screen, the background grow to a scale of 1, the h2 would animate in from the left and the h3 would animate in from the right.

Here is my attempt so far:

 

See the Pen poKKGVO by VikAPAD (@VikAPAD) on CodePen

[mvaneijgen]

Have you seen this example form the ScrollTrigger demo page? 

 

It has a horizontal section with individual animations per panel. 

 

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