Katie Brady

Hey @OSUblake thanks for the welcome! Here's a CodePen demo with just a single track & dot (and much much less SVG/JS ?). https://codepen.io/llexan/pen/LYOaGEY?editors=0010 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! ?

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! ?