Progress Bar and Horizontal Section Sequences

[TSLMH]

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

[GreenSock]

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". 

[TSLMH]

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.

[GreenSock]

Sure, please provide a minimal demo. 

[TSLMH]

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

[OSUblake]

Try creating the progress ScrollTrigger last as it's going to be affected by the pinning.

 

[TSLMH]

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.

[OSUblake]

Works fine for me.

 

See the Pen NWaJepx by GreenSock (@GreenSock) on CodePen

 

[TSLMH]

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!