Path Animation on scroll

[D.Cus]

Trying to invert so the animation give the effect of the ball removing the line as it progresses.

 

I have been playing with the value of the line under the drawSVG option but this does not appear to have the desired effect, what can I do to achieve the desired effect?

 

 

 

See the Pen abBOzzO by darren-ignition (@darren-ignition) on CodePen.

[mikel]

Hey @D.Cus,

 

Welcome to the GreenSock Forum.

 

You could use a fromTo tween

 

.fromTo(".theLine", {drawSVG: '100%'}, {drawSVG: '100% 100%'}, 0)

//Use either percentages or absolute lengths. 
//If you use a single value, 0 is assumed for the starting value, so "100%" is the same as "0 100%" and "true".
//Use a space-delimited value to define a segment like "40% 60%". 

 

Happy tweening ...

Mikel

 

[D.Cus]

@mikel this works, thank you