Jump to content
GreenSock

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

Horizontal Parallax Scrolling

Recommended Posts

I am trying to make a horizontal parallax slider for my website but not able to implement it correctly. I looked out other parallax examples but they all were vertical ones. But I want to scroll horizontally with vertical scrollbars. So, I tween the 'x' property of different elements which different scrub value. The first tween works fine but in second tween the elements are already scrolled at starting position. The 'x' value to scroll is static but will change it to work dynamically. Please help me with this one.  

See the Pen LYGKeeX by anshul-bansal (@anshul-bansal) on CodePen

Share this post


Link to post
Share on other sites

Hey @anshul,

 

Welcome to the GreenSock Forum.

 

Does this example meet your expectations?

 

See the Pen LYGKQrp by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

  • Like 3

Share this post


Link to post
Share on other sites

Thank you for your reply Mikel.

But It's the same as I posted. 

I want the title and all the other stuff to move at different speeds. I have changed my codepen example. See that the title and the box are moving at different speeds but they are not aligning as they should be instead all the titles already have some 'x' property set at the start when they should be set as zero. 

Share this post


Link to post
Share on other sites

Hey @anshul,

 

Maybe this one?

 

See the Pen ExPBEBX by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

  • Like 4

Share this post


Link to post
Share on other sites

Sorry, but I am still not able to figure out how would I implement what I want. Look, everything is correct but I want to know why scrolltrigger is applying a transformation to my second tween at the start even when I have not scrolled it. In the above codepen demo, the titles already have a transformX of 750px at the start when it should be zero and on scroll it should move 1000px to the end but it only moves the remaining 250px.

Share this post


Link to post
Share on other sites
2 minutes ago, anshul said:

why scrolltrigger is applying a transformation to my second tween at the start even when I have not scrolled it. In the above codepen demo, the titles already have a transformX of 750px at the start when it should be zero and on scroll it should move 1000px to the end but it only moves the remaining 250px.

This is because of the start position of the ScrollTrigger. By default, start is "top bottom" which means start when the top of the element is at the bottom of the viewport. Since your trigger starts with its top above the bottom of the viewport, the progress is already partially complete even on load. For more information about how start and end work, check out the ScrollTrigger docs.

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you @ZachSaucier. That definitely solves my problem. 

  • Like 1

Share this post


Link to post
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.

×