rbkhrlstn Posted December 27, 2019 Share Posted December 27, 2019 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 More sharing options...
ZachSaucier Posted December 27, 2019 Share Posted December 27, 2019 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 More sharing options...
rbkhrlstn Posted December 27, 2019 Author Share Posted December 27, 2019 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 More sharing options...
ZachSaucier Posted December 27, 2019 Share Posted December 27, 2019 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 More sharing options...
rbkhrlstn Posted December 27, 2019 Author Share Posted December 27, 2019 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now