Parallax on horizontal scroll pinned panels

[rubiksx]

Hello everyone,
 

I've been using GSAP quite a bit, but mostly at a basic level. I'm working on a project where I want to achieve a similar effect to what you can see on this website: https://pandapay.ca If you scroll down on that website, you'll notice the smooth sliding and a subtle parallax effect on the black/white panels. 
 

I've attached my current CodePen, where I have the panels scrolling, but I'm missing the smooth slider and that subtle parallax effect. Any help or guidance you can provide would be greatly appreciated.
 

Thank you,
Matt

See the Pen XWovjmb by mattbay (@mattbay) on CodePen

[mvaneijgen]

Hi @rubiksx welcome to the forum and thanks for being a club member 🎉

 

I didn't get how you made the animation, so I have changed your logic a bit, instead of having the panels side by side I've stacked them all on top of each other and then animate them .from() the right side to the position they are already in and instead of the index of the panel I've used at stagger on the tween. Then I've created an extra tween that animates the title of the panel and that animates at the same time as the previous tween using the position parameter. (I've also converted your tween to a timeline). I've changed your code not that your approach was wrong, that is the beauty of GSAP you can write in which ever way you like, but it was easier for me to explain it in this way, because that is how I'm used to working with GSAP.

 

So right now there is a slight parallax effect on the title. Is that what you're looking for?

 

I've disabled the second ScrollTrigger, because I've found that you hardly need more then one ScrollTrigger to get the desired effect. 

 

Hope it helps and happy tweening! 

 

See the Pen XWovjyp?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[rubiksx]

Hi @mvaneijgen, Thank you


Thank you very much. Yeah, this works so much better. I was thinking from the example my logic will need to change but I wasn't sure this is working really well now, and yeah, I just need to tinker with the  xPercent: 50, 

Thansk so Much 

[mvaneijgen]

You're welcome! Let us know if you need any more help. 

 

Good luck with the project and happy tweening! 

[rubiksx]

Hi Guys 

Sorry to jump back into this topic. My client wants to pause eqaully each section a bit longer past the default scroll, i have been playing about, but it only seems to stay longer on the middle section.

Ideally when the first one hits the top sticks, for example 5seconds then the next one, when in full view, sticks for 5 seconds, and same with the last one

See the Pen poGKyOo by mattbay (@mattbay) on CodePen

Thanks Matt

[Cassie]

Hey Matt!

 

Here you go, I took out the stagger and I'm explicitly adding tweens for each panel now. I added a class of panel2 and panel3 to make it clearer.

Then we can easily add a position parameter to each panel animation to create a 'pause'

I honestly always recommend people write out each step of a GSAP timeline when they're new to GSAP, you'll end up with longer timelines but it's the best way to understand what's happening. Then when you really grasp what's going on you can add staggers or loops or obfuscate stuff away a little more to make the code shorter.

See the Pen XWOYKNg?editors=1010 by GreenSock (@GreenSock) on CodePen

[rubiksx]

Thanks, @Cassie, this makes sense and worked a dream thanks so much for your quick response