How can I update the scrollbar when a click event changes a scrollTrigger timeline.progress() value?

[sosilver]

Hi everyone,

In my example I've attempted to make a navigation for a pinned and scrubable scroll trigger animation. The chapters in the navigation are given click handlers that set the tl.progress to the start of its corresponding box in the animation. When clicking on the link, it animates to the correct box but the scrollbar does not update. Upon scrolling again the animation jumps back to the position it was in before the click occurred.

 

How can I update the scrollbar to stay in sync with the position of the timeline? Is there some value I can pull from the tl.scrollTrigger to keep the window scroll in sync?

 

Any insight would be greatly appreciated. Thank you so much.

 

 

See the Pen vYrPdgJ?editors=1111 by renoxx (@renoxx) on CodePen

[Rodrigo]

Hi,

 

You can use the ScrollTo Plugin as shown in this example:

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

 

All you have to change is the fact that you are targeting vertical elements instead of horizontal. Just keep an eye on the ScrollTrigger instance's start and end point. This is the closest I can get but I wouldn't trust it since it has a magic number inside and that always spells trouble along the way:

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

 

Hopefully these are enough to get you started.

 

Happy Tweening!

[sosilver]

Hi Rodrigo,

Thank you for pointing me to the example pens and hooking up my current example with one potential solution. I think I understand what you mean about a magic calculated number, its probably very difficult to get the progress bar to line up exactly with the start of the chapter. I'd like to study the examples, experiment a bit, and come back with  questions related to what you provided. Thank you for pointing me in the right direction!

[sosilver]

Hi Rodrigo,

I played around with your codepen as well as my own. I'm happy to report its working. Your implementation using the scrollTrigger.start and .end values gave me the info I needed to make my own adjustments. I did bump into one issue I was hoping you could shed some light on.

 

I noticed that the tl.scrollTrigger.start and tl.scrollTrigger.end values only work properly when they are called inside the click event. If those values are set as a variables outside of the click event,  it provides values 0 and undefined respectively. It wasn't an issue per say, but I was curious why this happens. Attaching updated codepen with console logs. 

 

See the Pen abKrGVK by renoxx (@renoxx) on CodePen

 

Thank you again for your help! Marking your previous post as the solution!

[GreenSock]

ScrollTrigger populates the start and end values on refresh(). With tweens, that can happen pretty much immediately but since timelines are created before they're populated with children, GSAP waits a tick before refreshing those (otherwise the timeline would have no content whatsoever yet when it is refreshed and the start/end are calculated and the initial state is rendered - that's why it waits). You could call tl.scrollTrigger.refresh() manually if you need those calculated pronto, but that's almost never necessary. 

 

I just wanted to explain what was likely happening in your case.