Slide items on side on scroll

[archimedo]

Hello, 

I've been trying to achieve an effect like this one

I'm probably doing something wrong with the FromTo function and as you can see from the codepen I can't completely achieve what I'm looking for.

 

Can you help me figuring out what I’m doing wrong?

Thanks 

See the Pen rNQzJma by aieio (@aieio) on CodePen

[mvaneijgen]

Ah yes, there are several things that are not really correct here. Thanks for the demo, this really helps show how you think, which is not wrong, but there are easier solutions to get to a better result. Bellow these a few points that are important when working with GSAP 

1. Single tweens are just to animate one particular thing (or multiple of the same things), but as soon as you want to animate more then one item you're better of using a timeline 
2. .fromTo() is a really powerful tool in GSAP and I use GSAP on a daily basis and I hardly use it. So when starting out challenge your self to use only .from() or .to() tweens, because your element is either already at its start position or end.
3. GSAP has a build in property for x and y percentage based values, called xPercent and yPercent,  x: '-200%', becomes, xPercent: -200
4. When using ScrollTrigger you probably only ever need one ScrollTrigger to get to your desired effect 

I would suggest starting slow with GSAP and making animations more and more complex with the things you will learn along the way. This seems like a fairly complicated animation if you have not fully grasp all the tools of GSAP, check out the following article to get a better understanding 

 

 

I had to tweak a lot of things and I want to walk through them with you. First I find the best thing to do is to have all my HTML and CSS positioned correctly, for me that means that I want all my elements to be where they need to start from or end up when the animation is done, so I've stacked all your elements as you can see in this pen

 

See the Pen zYMdazv?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

Then I start focusing on the animation, see I don't have ScrollTrigger enabled there. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. I've also places some comments in your code (this version and the next) be sure to read through them. 

 

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

 

And finally at last enable ScrollTrigger to see how every thing is working on scroll. Hope it helps and happy tweening! 

 

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

[archimedo]

Thank you so much for the reply!

 

Actually I wanted to approach it the way you did but I was not sure how to do it. It was really helpful to only have one container and treat the different "scenes" like100vh frames, that helped me create the animation I needed!