Trouble thinking through a scrollTrigger animation

[DataCamp IT]

I've been able to pull off some straight forward `scrollTrigger` animations, but I'm struggling with one and I'm sure it's that I'm not thinking about it properly. There's a video of the design on google drive, but the gist is that it's a series of media flags. The image should stay pinned until the text from the next one is in the center, then fade out as the new one fades in.

 
The challenge for me is that technically I need to change children of the active scroll item and the prior one. The closest that I've gotten is to rely on classes and my own CSS but that feels like I'm heading down a bad path. Can anyone suggest how you'd approach this? Code is always helpful, too, but I'm mostly interested in what parts of the API I'm not understanding. (It may also be that looping over these isn't the best option and that I should do individual timelines)

Thanks in advance for any thoughts! 

See the Pen MWbgaWx?editors=0010 by dandenney (@dandenney) on CodePen

[ZachSaucier]

Hey DataCamp IT and thanks for supporting GreenSock with a Business Green membership!

 

I think looping through each of your sections is a fine idea. I would likely use GSAP to do the toggling of your values and all of your animations though:

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

 

An alternative would be to create everything as a big timeline with a single ScrollTrigger. 

 

You likely want to add some extra spacing to the bottom of the section so your pinned content doesn't cover everything. Or perhaps fade the pinned section using another ScrollTrigger when you're exiting it.