ilovecheese

Okay, what you have works, but I think in my production code, it won't work. Below is another updated demo, which reflects closer to my production code. I have two timelines, one for an intro, and another for the items. If I start a parent timeline early, then the intro will already be faded halfway out, which is not what I want. Thanks! https://codepen.io/ilovecheese/pen/JjzNKao

I have setup a minimal demo, from my existing code. As you scroll, the items pass from right to left, but what if I want #1 to start in the middle and #8 to end in the middle? What if the timeline started a little earlier and ended a little sooner? I can set css manually for the first two items to achieve this, but I thought it would be easier with gsap. Wanting to start here: ... and wanting to end here:

Thank you @akapowl. I see what you're saying about using pinnedContainer if I had others, but what you've provided works since all I have is that one section.

I am wondering if I can keep the content above and below the pinned item in place, while the targeted div does the clip-path reveal. Most of the examples I see have the divs at 100vh, so you never see what's above or below. I have a working example that is close to what I am wanting, where I want to "lock in" the top/orange area and the bottom/red area, while the purple/green reveal is happening. Then when done, continue scrolling down. As you can see in my example, the bottom/red area is not where it needs to be when the effect starts, since the pinning padding is pushing it down. I have added pinSpacing: false, but that doesn't help. Thanks.