Horizontal Scroll Stacking Cards

[Redcase Software]

Hello everyone! 
I want to create a horizontal scroll stacking cards effect. I'm kinda close to what i want. If you uncomment the css inside the "Desire final positions" section you'll see my desire final position. 
Basically I want each section to stop exactly on the previous number. Each number is 64px width. Therefore, I need to calculate the stop of the next section at 100% + 64px (Maybe. Because the pinned values that I have set I just got them by testing)
Any ideas?

See the Pen rNPEBVg by pmakos (@pmakos) on CodePen

[Redcase Software]

I think i figured it out. 

See the Pen YzBoKMY by pmakos (@pmakos) on CodePen

Basically, i edit the code from this codepen

See the Pen YzjvNXB by ssaruuuu (@ssaruuuu) on CodePen

 

 

[mvaneijgen]

Great! You already have the elements in the desired position! Then 50% is already done! 

 

Let's remove ScrollTrigger for now, it is way easier to focus on the animation at first and if we have an animation then ScrollTrigger can come in and hook it up to the scroll position.

 

Check it out, I've enabled your CSS and instead of a .to() animation I've used a .from() and with a simple stagger all the animations come in one by one.

 

See the Pen wvNLvWb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Personally what I would do is something more like this. If you remove all the javascript you will see that all the elements are stacked on top of each other. In the javascript you can see we have a gsap.set() which calculates the offset for each card based on their index and then the animation that's get them .from() some where in to place. Hope it helps and happy tweening! 

 

See the Pen OJryLqp by mvaneijgen (@mvaneijgen) on CodePen

 

[Redcase Software]

@mvaneijgen

Man, once again you're here to unstuck me! Thank you so much!
Indeed, nice approach. I don't know why I didn't try it.

But the issue with this is that it's not dynamic.

I think that my answer above is suited more to my case.