Scrollbar jumping around with scrolltrigger scrub

[vargwin]

I have multiple "section" in my main area where each section can have one or more animated children.

I want to be able to scroll and for each section, when the section top hits the viewport top

1. Pin the whole page in place.
2. Start playing the current section children animations.
3. When all animations are over, unpin and continue to next section.

I am seeing two issues:

1. The animation on second section is not completing and third is not visible even at scroll end.

2. Scrollbar height is changing while scrolling and it jumps around.

3. In full desktop view, the scrollbar gets stuck at second section and repeatedly jumps back.

 

Can you please help?

Thanks!

See the Pen NWVvbJe by vargwin (@vargwin) on CodePen

[mvaneijgen]

Hi @vargwin welcome to the forum!

 

There is almost no room to scroll on the page . If I remove all JS code you can see, you just ave a few hundred pixels to play with on scroll. 

 

See the Pen RwmZKRJ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

If you then enable ScrollTrigger and I've set ID's to each, so you can see what is happening better. ScrollTrigger starts when the green markers touch each other and stop when the red markers touch each other. On my screen the first ScrollTrigger cant event finish scrolling. Simply there is not enough space on the page to finish your animation.

 

See the Pen zYQdNKN?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

If I add the height of two of your sections + some extra space all animations will finish. Hope it helps and happy tweening! 

 

See the Pen vYwJgXr?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

[vargwin]

Thanks @mvaneijgen for such a quick response.

 

If I have a set of boxes in main with predefined height, is there a programmatic way of finding out the required height of the view to play out all animations?

 

For example, if I animated the third box in the same way, that requires adding even more height to the page.

See the Pen eYaEvxP by vargwin (@vargwin) on CodePen

 

If the page only contained one box of height smaller than page height, I still want the animation in that box to play. Seems like I need to have ("100vh" + box height) as the page height - correct?

[mvaneijgen]

I suck at math. There is probably something logical to get the correct distance. I would for sure use the ScrollTrigger.end values, but on my screen when I do the math that seems logical it needs 82px extra to finish the animation and I cant seem to figure it out where that comes from.

 

See the Pen yLWobXZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

That said it seems all highly subjective. I don't know what you're building, but will there never be anything before it or anything after it? Because this will highly impact what kind of math you'll need to do. Also the start value (which is now the top of the browser) will highly influence how you'll need to do the calculations. 

[GreenSock]

Are you trying to do this?: 

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

[vargwin]

Thanks @GreenSock. That is indeed what I am trying to do.

 

I am still having trouble when some of the boxes are animated and some are not:

See the Pen MWdvVRJ by vargwin (@vargwin) on CodePen

 

[vargwin]

Regarding the scrollbar jumping around, I figured out the issue - it was because in my case, the container had display: flex. I am guessing it's not directly supported?

[GreenSock]

That's mainly because you removed the <section> that was expanding the space. 🙂

 

I assume you wanted to do something like this?: 

See the Pen abryRMN?editors=1010 by GreenSock (@GreenSock) on CodePen