How to animate a circle border as I scroll

[gsapmonkey]

Hi,

 

I am trying to get a circle-dotted border animated. As I scroll, the circle arc should fill in the distance between the solid dots with borders as shown in image. Is this possible with gsap. Any plugin like morphSVG?

 

The closest I found though its not associated with scroll is below

See the Pen JjVNwNL by codingchefs (@codingchefs) on CodePen

  

 

This is the codepen with my work in progress

 

 

Any ideas how this can be accomplished?

 

See the Pen wvZdYvo by codingchefs (@codingchefs) on CodePen

[GreenSock]

Here's a great article from @PointC:

https://www.motiontricks.com/svg-dashed-line-animation/

 

And yes, absolutely, GSAP's DrawSVGPlugin is great for that kind of thing. You'll need a Club GSAP membership. https://gsap.com/pricing 

[gsapmonkey]

Thank you so much. I will look into this post.