Jump to content
Search Community

seamless loop with DrawSVG

eballeste test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi! I'm trying to animate an svg path using the DrawSVG plugin and can't seem to find a way to seamlessly loop the path using a consistent width around the connected path. I've seen examples of this accomplished with css but can't seem to be able to accomplish this using the plugin. Does anybody know how this can be done? Thanks!

See the Pen WQRyKp by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,


Thanks for the demo.


The issue is that DrawSVG can't draw a segment at the end of the path at the same time it is drawing a segment at the beginning (which is needed for a seamless loop).


One solution is to create 2 paths with 2 segments and animate them in a way that when one path is shrinking on the way out, the other is growing on the way in.


In this example I have 2 circles on top of each other:



click the cheat button to see how the 2 animations are synchronized. Mess with the timeScale() too to slow it down, like timeScale(0.2)

  • Like 7
Link to comment
Share on other sites

My Math skills are limited so I had to keep it simple. After setting the duration to 2 (on a whim), my thinking was...


If my segment is 10% of the total path and I need to shrink it down to 0%, it should take 10% of the total duration to do that which gave me 0.2 for the shrink and 1.8 for the rest of the tweens.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...