How do I Calculate Scroll Progress on Company Timeline using ScrollTrigger and Draggable?

[michaelx]

Hi all, 

 

As you can see, I am new to GSAP (and loving it). I have a project where I want to build the classic company timeline with pinning and scrolling. As you'll see in the demo I use pinning to hold the decade description while the specific year data scrolls by. 

 

On its own, the pinning works to my liking, however when I add in the navigation bar things get a little complicated. I am trying to use Draggable to allow the user to drag the navigation and also using Anchor links to allow clicking. I don't quite understand how to calculate the long content and sync that to the navigation bar to show accurate scroll progress. 

 

Does anyone know how to accurately calculate and update the scroll progress on the navigation? 

 

I hope I have provided enough information, thank you to anyone who gives some time to this,

 

Michael 

 

See the Pen RweKPNx by xyeres (@xyeres) on CodePen

[Rodrigo]

Hi @michaelx and welcome to the GreenSock forums!

 

There are a few issues on your setup. The biggest one has to do with the order you're creating the ScrollTrigger instances. You first create the one that controls the timeline that moves the timeline element at the bottom, then you create a series of ScrollTrigger instances that pin a bunch of elements, that creates pin spacing, which changes the height of the element, after you created the ScrollTrigger instance for the timeline element, so that calculation is wrong after creating the section ones. One alternative is to call ScrollTrigger.refresh() after the sections loop or create the timeline ScrollTrigger after creating the sections ones.

 

Then there is another problem that I couldn't figure out. I forked your codepen example and created the timeline ScrollTrigger after the sections loop. As you can see the timeline position doesn't match the start of each section. That is because you have 5 scroll sections and just 4 segments in your Draggable timeline, so there is a math factoring issue there:

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

 

Unfortunately we don't have the time resources to tackle complex logic issues like this (I battled with it almost 45 minutes and that's more than I had, but I was drawn by the challenge 🤷‍♂️). If you want you can hire us on a consulting basis or post in the Jobs & Freelance forums in order to get help there if you want.

 

Hopefully this helps in some way. Good luck with your project!

Happy Tweening!

[michaelx]

Thanks Rodrigo! I appreciate the time and the input, I thought maybe it would be a somewhat obvious fix but playing with it most of the day I see it's a more complex problem than I had originally thought.

 

I haven't fully figured out how to achieve what I set out to, but I have made some progress. I may share that progress here for others to find, we'll see how it goes. 

 

 

[michaelx]

Hi ya'll, i kept working on this project and found an acceptable way to do this. 

 

I began examining the issue and found that the more I experimented with pinning in GSAP, the more it seemed like I was hacking together a makeshift solution rather than using it as intended. Eventually, I re-discovered that CSS's position sticky property essentially provides the functionality I was after. I combined that with GSAP's draggable plugin (along w some smooth scrolling) and I was able to come up with this:

 

See the Pen poxWeqE by xyeres (@xyeres) on CodePen

 

I'm open to constructive criticism if you spot something you think could be improved!

 

One thing I'm wanting to do but can't figure out is making the draggable instance scrollable when the user hovers and scrolls, is that possible with draggable? (right now if you scroll the page, the timeline moves, but i was thinking of having the timeline move independently of the rest of the page at a faster rate to allow the user to navigate the timeline separately from the page position, like you can when you drag left and right)

[GreenSock]

22 hours ago, michaelx said:

One thing I'm wanting to do but can't figure out is making the draggable instance scrollable when the user hovers and scrolls, is that possible with draggable?

Sure, pretty much anything is possible. It's well beyond the scope of help we can provide free in these forums, though. You're welcome to contact us about paid consulting services if you'd like. 

 

It'd boil down to mapping the hovers to their appropriate scroll positions, or if you want the dragging to affect it that way too, you'd map drag values to scroll position and set it accordingly, like in an onDrag. 

 

Good luck! 👍