Horizontal, pinned progress bar/steps - change step opacity on scroll

[Filip3000]

I'm trying to build a "progress bar" within the section that will be pinned until the bar reaches the end of the window (100% width) without the pin-spacer padding. The bar should also reveal (opacity: 1) a step/item when it goes through it.
I hope the codepen example is clear enough.

 

Thank you for your help!

 

Edit: I managed to deal with the opacity part.

See the Pen JjXMJdG by filip3000 (@filip3000) on CodePen

[GreenSock]

The main challenge here is that you've set it up in a way that makes the percentages very different based on the width of the viewport. The steps remain within the same area, but the progress line may extend out a lot further in either direction. So you can't just do a regular timeline animation where the opacity animations are placed at certain spots on the timeline linked to the overall progress. So your choices, as I see them, are: 

1. Dynamically re-create the timeline on resize and do all the calculations accordingly. 
2. Use an onUpdate on the ScrollTrigger that checks to see if the progress line has passed each item element and if so, trigger the opacity animation. And obviously add logic to skip that if it has already gone past it. 

Good luck!

[Filip3000]

@GreenSock  Thank you for your reply. I actually managed to do so and it seems like it matches your advice.

Can you give me any tips on how to properly "lock" the end marker so I could pin the section without the extra padding below?

[GreenSock]

8 hours ago, Filip3000 said:

Can you give me any tips on how to properly "lock" the end marker so I could pin the section without the extra padding below?

I'm not entirely sure what you mean there, but here's a fork with my guess:

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

 

Notice that you had a collapsing margin issue that I resolved by adding a transparent border on the top and bottom. You could also do it in some other ways, like using padding instead. And by default, when the parent has display: flex, it turns pinSpacing: false because that's normally what people want but you can explicitly set it to true if you want the extra padding added. 

[Filip3000]

Oh, nice - thank you for the margin fix!

 

But my main problem is that I want to specify "duration of the scene" (using ScrollMagic analogy). I want to pin the section for the duration of the scroll needed to get to the 100% width of the bar without the extra padding below (so that my layout is the same with or without GSAP,  scroll only affects the sections with the bar - animation on scroll, no extra padding).

[mikel]

Hey @Filip3000,

 

As a SVG fan, I'll send this version into the race.
And: You can also pin another object - including the body.

 

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

 

Here another example 'to pin or not to pin'

 

See the Pen c27a129d4e591657ee2eb7bc85a1774b?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy pinning ...

Mikel

[Filip3000]

Wow @mikel, this is great! I really appreciate your help, thank you very much - this is exactly what I was trying to do. And thank you @GreenSock for you input as well.