Issues with reversing paths for DrawSVG

[Katie Brady]

Hey all, I'm currently working on an animation where these little mint dots move around some paths with "tails" that follow behind them. MotionPath has been great for the dots and DrawSVG seems to be working well to animate their tails. But some of them are drawing in the opposite direction intended. I've tried a couple of options to solve this: first to use from tween instead of to, but then the lines shrink over time instead of staying a consistent length; also tried reversing the path in Sketch as suggested. That reversed the animation but then the path itself was shifted to a different spot in the SVG (no longer on top of the purple "pipes").

Is there a better method to reverse the path so it stays in place but just changes the starting point? Is DrawSVG also the best for animating these "tails" behind those dots or is there a better approach altogether?

Thank you so much for the help! 🙏

See the Pen MWOrNoM?editors=0010 by llexan (@llexan) on CodePen

[OSUblake]

Welcome to the forums @Allen Brady

 

That's some really nice artwork there 😉

 

However, there's a lot of code in your demo, both JS and SVG wise. Do you think you can simplify it down to just bare bones demo, like just a basic path and simple dot? It will be much easier to get to the bottom of the issue that way. Thanks!

 

[mikel]

Hey Allen,

 

If the two paths for moving point and tail are identical,

both have the same coords, have the same start/end points, there shouldn't be a problem.

 

See the Pen NWwJGad??editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

 

[Katie Brady]

14 hours ago, OSUblake said:

Welcome to the forums @Allen Brady

 

That's some really nice artwork there 😉

 

However, there's a lot of code in your demo, both JS and SVG wise. Do you think you can simplify it down to just bare bones demo, like just a basic path and simple dot? It will be much easier to get to the bottom of the issue that way. Thanks!

 

Hey @OSUblake thanks for the welcome! Here's a CodePen demo with just a single track & dot (and much much less SVG/JS 😅).

See the Pen LYOaGEY?editors=0010 by llexan (@llexan) on CodePen

 

2 hours ago, mikel said:

Hey Allen,

 

If the two paths for moving point and tail are identical,

both have the same coords, have the same start/end points, there shouldn't be a problem.

 

 

 

 

Happy tweening ...

Mikel

 

 

 

Oh this is awesome, thank you @mikel! 😄

 

If I'm understanding correctly I could create a separate, identical path for the tail instead of just animating the track stroke?

Right now I have 8 different paths/tracks and am fading between them to give the illusion of one. But this looks like it'd be much cleaner (and probably more performant) to have just one track and use this technique in your example to go "under" the bridge when needed.

And if I can make it one track instead of split into four that would solve the reversing problem 🤔 I'll refactor and give that a shot!

 

Thank you all again so much!

EDIT: Still working on rewriting everything but your example @mikel solves my issues! 🙌

Edited March 5, 2022 by Allen Brady
Update that Mikel's example is the solution