[ScrollTrigger + DrawSVG - Link path progress to different height sections]

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

[Issues with ScrollTrigger + ScrollTo navigation]

 

10 hours ago, akapowl said:

 

This thread shows an example of that - maybe it helps:

 

 

 

 

Thank you @elegantseagulls @akapowl, IT WORKS! I've updated the pen using @akapowl's example as reference.

@GreenSock note taken! I can imagine that it can cause weird issues. The transitions were there to spice up a little the pen example but I figure that GSAP is the best tool for that too ❤️ 

[Issues with ScrollTrigger + ScrollTo navigation]

Hi all! I'm having some issues trying to recreate a functionality similar to fullPage.js. Based on this post and the pens posted I could replicate a "snap to section" effect on scroll, but my issue is when I try to navigate to different sections using scrollTo.

 

My issue is that navigation anchors only skip to adjacent sections. I think it's because the onEnter and onEnterBack callbacks.

 

How could I "override" this actions and make the scrollTo anchors jump to the right section?

 

Thanks in advance!

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