drewatdrawn

@akapowl I may have spoken too soon. I realized after trying to implement with real content that the solution only works if the content height exceeds the viewport. If there's less content, the sections overlap. Too little content and a section will be completely hidden under its subsequent section and they animate at the same time. Any ideas?

Excellent, thanks! I think I'm on the right track. Realizing there are some conditional things I'll need to do with these loops, like not adding the negative margin to the first section, some similar things with the last section. Thanks again for all your help!

Ah, yes, a mix-up. The width, not height. If it's offset by the width of the section currently animating, that actually makes it easier to do dynamically since I can reference the section itself and not its previousElementSibling. They should all be the same width in this instance, but good to keep in mind for the future. I'm looking into a looping over each of these sections and I'm having trouble wrapping my head around if/how timelines would be treated differently than tweens. Is it any different or should I declare the timeline inside the scoped forEach and I'm good to go? Any chance you could point me in the right direction?

Thanks, Paul! It looks like we went through the same thought process right up until you cracked it with negative margin. The combination of the negative margin with the window height PLUS the previous section height did the trick! I had that efficient animation code article open in another tab alread - will be digging into that to make these sections DRY and easily repeatable in partnership with the CMS content. Thanks again!

New to GSAP and ScrollTrigger I'm working on a site where content sections will animate in, either fading in on top of a previous section or flying in from the left/right, but I need to be able to scroll through any lengthy content in these panels before triggering the next pin/animation (this is particularly important at smaller screen sizes). I've been racking my brain all day for a good way to do this. In the codepen I've got the first section working correctly (purple) and I can see the xPercent working beneath the purple area when I hit its trigger (the horizontal scroll bar changes) but I need the red section to come in on top of the purple section, either with a fade or a left/right translate. It seems like it should be straightforward and I must be missing something. I did try a solution that calculated the overflow height of the text content and tweened the content over the Y axis to spoof a scroll, which let me build a more complicated timeline, but this didn't feel as maintainable since I'll need to link up these sections to content built in a CMS (that I won't be able to control) and I'd prefer to stick with the native scroll behavior if possible to avoid weird timings when content is longer.