Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Recommended Posts

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


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

Link to comment
Share on other sites

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.



  • Like 6
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.