Jump to content
GreenSock

eballeste

seamless loop with DrawSVG

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:

http://codepen.io/anon/pen/MaJqjW?editors=001

 

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

Thanks Carl, 

 

That's kind of what I feared, I guess I can go into the illustrator file and duplicate all the layers, thank you so much for your codepen example! 

Link to comment
Share on other sites

Very cool and great example Carl :)

  • Like 1
Link to comment
Share on other sites

Thanks Carl!

 

Updated my codepen with your suggestions: 

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

 

Was wondering, how did you come up with those numbers (time and percentages)? Was it trial and error?

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

Yes! That makes absolute sense to me and did help me figure out how to get the correct numbers depending on the percentage of the segments needed. 

 

Thank you sir.

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.
×