I want to animate a svg line to a bumped curve on scroll

[codechirag]

Namaste Guys, I am trying to create one animation on scroll with a svg line but can't achieve as expected.

 

here is the screenshot and also the reference site https://thevariable.com/ 

 

I have tried so far is in the stack https://stackblitz.com/edit/react-mmp4w3?file=src%2Fstyle.css

[Carl]

Hi,

It's not really clear to me which part of the animation you have trouble with: the line morph, highlighting the path, moving the highlight segment etc...

 

Regardless, it's a pretty neat effect.

 

With GSAP's available tools it's all possible. 

 

Here is a demo with enough code to get you started:

See the Pen WNBVmwB?editors=0010 by snorkltv (@snorkltv) on CodePen

 

The reference site uses a masked path but I'm not sure how much of that site you intend to copy.

I copied the exact stroke d attributes from the site's source code for this demo.