Horizontal scroll with Layered Pinning from Bottom

[santicros]

Hey there! I've been looking at this forum for some days and found some useful information. Today I wanted to open this post for two reasons:
1. I was trying to do sort of this effect (https://itmoah.bugcrowd.com/) with ScrollTrigger, and found really useful two examples from the docs (

See the Pen eYpOZvX by GreenSock (@GreenSock) on CodePen

and

See the Pen KKzjaev by scros (@scros) on CodePen

), but didn't find anything that merged them. So here I'm sharing one solution I've created for this effect. Each vertical "page" is positioned absolute and translatedY, while each inner horizontal scrolling section is translatedX. One main timeline controls the order of the execution.

 

2. However, I would like to have some feedback as if it is the best option for doing it. Ideally I would like to separate in different parts (different Vue components) each sections, also I'll be adding some animations inside the horizontal scroll... And I think having one main gsap timeline can limit a bit things. Does anyone think I could create different separate ScrollTrigger animations that don't depend each other, and just depend on some other triggers that activate them? I'm not sure how should this be done, as layers are positioned absolute and shouldn't move.

 

Thanks!!

See the Pen gOrNmWW by scros (@scros) on CodePen

[ZachSaucier]

Hey santicros and welcome to the GreenSock forums.

 

As with most things, there are multiple ways to set up this sort of thing. The site that you link to animates some non-performant properties like top which is something to avoid  

 

An alternative to a single timeline would be to use a variable to keep track of the distance to each section. So if you had a section that you wanted to scroll horizontally you'd just add the distance of the horizontal scroll to the height of the section to get the total amount to scroll for that section. Add that to a running total to be used in the start and end positions of later sections. You'll have to recalculate and reset the offsets each time the page is resized if you do that. You could use data-attributes or a JS object to try and make it easier to do for each section.