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!

I am troubleshooting something similar and I've found a workaround but I'm wondering if there's a more clean way to handle it. If I use the `display: inline-block` option, it alters the result. I've made a minimal pen to show the problem compared with the desired result and a workaround to achieve it: https://codepen.io/dandenney/pen/XWjyXdj Does anyone know of a way to handle this without using extra elements and doubling the split targets? Additional context: I left out the effects and CSS I'm applying to the words, but I need lines and words in order to have a "masked" line and each word rising up from the mask