TSLMH Posted January 17, 2022 Share Posted January 17, 2022 Hello All, I apologize for a very newbie question but I have successfully started animating using parts from multiple different threads but I have come to a stop. I am trying to combine basically the following two functionalities: 1. Progress Bar to indicate the entire height of page, indicating your scrolling progress as shown here: 2. Placed in a page that begins with a sequence of horizontally scrolling sections like this: See the Pen LYLPKYd by GreenSock (@GreenSock) on CodePen - I just removed the snapping portions because I don't need that. The results of the combining both in the same page is resulting in a the progress bar tracking only the horizontal scrolled sections and not taking into account the actual page continues further. Thank you in advance. See the Pen abdwYaJ by Mamboleoo (@Mamboleoo) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted January 17, 2022 Share Posted January 17, 2022 Hi @TSLMH. I'm a bit confused - was one of those CodePens supposed to show your example where you've got a horizontal section and more vertical page? I must be missing something obvious. I don't see anything broken. Can you elaborate a bit? I wonder if you just created your whole-page scroll progress ScrollTrigger first (before the one that does pinning...which would push the page taller). Have you tried just putting that one last? Or you can set start: 0, end: "max". 1 Link to comment Share on other sites More sharing options...
TSLMH Posted January 17, 2022 Author Share Posted January 17, 2022 Sorry for the confusion. Looks like when I saved both codepen links they got out of order. The progress bar example at the bottom of my post should go with my first point. Both of these scripts do work independently but when I combine them in my test web page the progress bar does not work as expected. The progress bar itself works but follows only the horizontal movement shown in sliding sections and does not account for the length of the page itself. I hope that makes more sense. Link to comment Share on other sites More sharing options...
GreenSock Posted January 17, 2022 Share Posted January 17, 2022 Sure, please provide a minimal demo. Link to comment Share on other sites More sharing options...
TSLMH Posted January 17, 2022 Author Share Posted January 17, 2022 Okay, it took a while to get into codeine because it kept logging me out but here is the quick demo of both of those different functions combined in the same page that I need. You can see that the progress bar actually goes to 100% before even the end of the horizontal sections and most definitely doesn't reflect the entire length of the page that I would like. See the Pen gOGEmbN by TSLMH (@TSLMH) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 17, 2022 Share Posted January 17, 2022 Try creating the progress ScrollTrigger last as it's going to be affected by the pinning. Link to comment Share on other sites More sharing options...
TSLMH Posted January 17, 2022 Author Share Posted January 17, 2022 Trying to follow as best a newbie can. I tried moving lines 2-6 that dictate the progress bar portion to the very last thing in the js but it made no difference. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted January 17, 2022 Solution Share Posted January 17, 2022 Works fine for me. See the Pen NWaJepx by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
TSLMH Posted January 17, 2022 Author Share Posted January 17, 2022 thank you so much! I had tried it but didn't have it inside the closing bracket of the function so it made no difference. Thank you for your time. This works! 1 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