Search code examples
svggsap

Making a looping drawSVG animation smoother

I'm a novice with GSAP and am experimenting with the plugin. I want to create an effect where a rectangles border is drawn by a small path in a continuous loop. I've mostly achieved this, but the end of the animation is pretty choppy when it resets.

Here's a link to the codepen I'm working on.

How can I avoid that abrupt ending to the animation?

  • I've tried setting the animation to drawSVG: "100% 115%" and that didn't work.

  • I haven't tried changing the easing yet as I don't think that would fix it.

Thanks for helping!

Solution

  • I believe this tutorial is exactly what you're trying to achieve Codepen

    code required for codepen link

    I forked your pen so you can see it in action Codepen

    Hope this is what you where looking for