Animate SVG path on Scroll

[Welch08]

Hi everyone!

 

I'm trying to implement SVG drawing on scroll based on

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen

. Currently, I have achieved some results (attached codepen), and I have a couple of questions:

1. The timing of the circles is hardcoded (manually set by the selection method). How can I calculate them correctly? Is it possible to do this automatically? Can I somehow calculate when the line intersects the circle trajectory and launch the animation at that moment?
2. Is it possible to slow down the filling and the scroll itself? If the SVG fit on one screen, I think I could use pin, but since it doesn't, is it only possible to achieve this using a custom scroll?

 

I would appreciate any help or advice. Thank you in advance!

See the Pen poxPabO by welch08 (@welch08) on CodePen

[Cassie]

Hi there!

 

Quote

The timing of the circles is hardcoded (manually set by the selection method). How can I calculate them correctly? Is it possible to do this automatically? Can I somehow calculate when the line intersects the circle trajectory and launch the animation at that moment?

What's wrong with the route you're taking? It works! Calculating would be more considerably more complicated and mean more code. I'd just keep it simple if I were you.
 

Quote

Is it possible to slow down the filling and the scroll itself? If the SVG fit on one screen, I think I could use pin, but since it doesn't, is it only possible to achieve this using a custom scroll?

The only thing I can think of is using pin and a transform?

See the Pen rNqwWLo?editors=0010 by GreenSock (@GreenSock) on CodePen

You may need to have a play around with pinSpacing and positioning to get it to work with your content though.

[Welch08]

 

35 minutes ago, Cassie said:

What's wrong with the route you're taking? It works! Calculating would be more considerably more complicated and mean more code. I'd just keep it simple if I were you.

Got it! Well, in general, you are right, in fact, this is a unique case, so better just manually set timings, rather than calculate them somehow.

 

 

36 minutes ago, Cassie said:

The only thing I can think of is using pin and a transform?

wow, a great way to use pin and transform, thanks, I'll use! Thanks!