How I can create parallax (horizontal scroll parallax) effect used gsap?

[dc65k]

Hello everyone. I have example by parallax effect on scrolling.

https://pochta.tech/

Horizontal scroll parallax.

I try repeating this effect used gsap ScrollTrigger.

My example with problem:

Tell me please, what the wrong in my code?

See the Pen oNzxEpK by dc65k (@dc65k) on CodePen.

[akapowl]

Hey @dc65k - welcome to the forums.

 

Your setup is a bit different, so it appears to be working differently.

 

Setting the section containing your slider to 100vh, centering the content within that section, and setting the start of your ScrollTrigger to 'center center',

already gives you the effect like on that page you linked to.

 

See the Pen 8cb2ba6a831a1a380ac4a7069c456a3b by akapowl (@akapowl) on CodePen.

 

 

 

If you want the slider items to be explicitly those 200px in height, you'd get quite a bit of whitespace though.

For this scenario, probably it would be easieast to simply just pin the .container instead of the .slider.

 

See the Pen 5383e85f6d81e4a8a63428721baf62dd by akapowl (@akapowl) on CodePen.

 

 

 

I noticed, that in the later demo, the pin would be jumping though, similar to what is described in this thread

 

 

 

But adding a padding of 1px to your .container (as @GreenSock suggested in that thread) gets rid of the jumping.

 

Hope this helps.

 

Cheers.

[dc65k]

Thank you very much.