Jump to content

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

Multiple sections with smooth scrolling that "glides" to a stop

Recommended Posts

In several questions about smooth scrolling, there is a link to this project on codepen (). It is amazing and awesome and just what I had spent weeks looking for. I, however, am new to javascript and would like to be able to have more than one scroll-container on the page. It would be a scroll-container, a normal section, and then another scroll container. I imagine I need to do a loop or reset, but I don't know how to do it correctly. It would be "for each .scroll-container, do the magic."


Here is the site I'm trying to do this on (http://detroitdough.flywheelstaging.com/). It would be the two sections with the "dough" in them. I have the first one working but can't figure out how to loop the second one in.

See the Pen QqPqbN by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Hey rbkhrlstn and welcome to the GreenSock forums.


Taking a quick look at your site, your second set of images is indeed animating. However they are positioned beneath some other content and are likely further vertically up the screen than you want them to be. Without seeing your code it's hard to suggest how to fix this issue. I recommend making a minimal demo of the issue using something like CodePen like this thread suggests:


Link to comment
Share on other sites

Hi Zach, 

Thank you for replying. I changed it to querySelectorAll, so it is indeed firing for both now. But, it's using the first instance of ".scroll-container" instead of the second. You can see the codepen here 

See the Pen BayjPjZ by rbkhrlstn (@rbkhrlstn) on CodePen



I don't know if there is another way to go about it?

Link to comment
Share on other sites

Hey rbkhrlstn,


You're using quite an old version of GSAP there. I recommend that you upgrade to GSAP 3 :) It will give you access to things like GSAP's quickSetter() method that are handy for cases like this.


The main issue is that your images aren't really taking into account their offset in terms of the page. To handle that, you could record the vertical offset by using .getBoundingClientRect().top (making sure to do this on resize also) and then factor that into the calculation of the y position for each element:

See the Pen zYxdKbP?editors=0010 by GreenSock (@GreenSock) on CodePen


It's hard to see in this demo because of the extra white space that you have.


P.S. You can't have two IDs that are the same like you had in your demo. IDs have to be unique :) 

Link to comment
Share on other sites

Thanks, Zach. I'm using the class in the code, not the id. I know id's have to be unique. I'm not a complete idiot, just when it comes to js ;)


I'll have to try the .getBoundingClientRect().top. 


Thank you.

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.