ScrollTrigger + DrawSVG - Link path progress to different height sections

[dvdslns]

Hi all! Im sorry for the somewhat vague title but couldn't find a shorter way to express my issue, and I was hoping to get some guidance 😓.

What I'm trying to achieve is to:
* build a side navigation with 4 evenly distributed points, each one pointing to one of the 4 sections on the page
* I'm using drawSVG to fill the nav path as we scroll
* however, fill is relative to the page height, so I'm looking for a way to "slow down" the fill speed to match the distance scrolled at each section (does that make sense?)

 

For example, in the attached pen, if I were to scroll to section 3, the nav svg path should be filled up to the label "section 3".

 

Is this possible? Thanks for your help!

See the Pen mdpLQee by omaidog (@omaidog) on CodePen

[OSUblake]

Hi dvdslns,

 

Instead of animating a single path, you will probably need break apart your path into individual sections, and animate each section individually to better match up with your scrolling section. It might take a little finessing as matching up a curved path with linear scrolling is not a 1:1 relationship.