Horizontal Scrolling - Scroll sections from right and content from left

[VikAPAD]

I am using Horizontal snapping sections as a starting point. What I would like is for the sections to scroll in from the right and the content within the sections to scroll in from the left. My initial thought was just to create a separate container for the content with fixed positioning and reverse the order. This actually almost worked, but due to the fact that there are 10 total sections, the scroll height that's being calculated is too tall which allows you to continue scrolling down the page once you reach the end (as seen in the CodePen below).

 

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

 

My other thought was to have the content within each of the panels and just start with the content off the left side of the screen and have it scroll into the middle as each panel is scrolled into view, but I haven't had much luck with that.

 

Any ideas?

 

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

[akapowl]

Welcome to the GSAP forum!

Since your .container__content has position: fixed anyway there really isn't much use pinning it with ScrollTrigger - since it is already fixed - and I think this is also where your problems originate. The only thing in your scenario that would need to be pinned is your .container__bg, which also makes sense to be used as the trigger element for the text going the other direction.

If you need mulitple animations to be triggered at the same time and/or scrubbed along the exact same distance like you would here then, best just use a timeline instead of setting up multiple ScrollTriggers, and use the position parameter to tell GSAP that they should both start right away.

 

See the Pen MWGWezY by akapowl (@akapowl) on CodePen

 

[VikAPAD]

This is great, thank you so much @akapowl!