Looping a From to To

Recommended Posts

Anyone know how to loop the circle animation. 

I tried adding (yoyo: False) to each of the lines but they're only looping their respective parts. 


I'm trying to get the circle draw on and have the draw off be in the same direction. 


Share this post

Link to post
Share on other sites

Here's probably the simplest way to do it: 

var tl = new TimelineMax({repeat:-1});
  tl.from("#stroke1", 1, {
    drawSVG: "100% 100%",
    ease: Expo.easeInOut
}).to("#stroke1", 1, {
    drawSVG: "0% 0%",
    ease: Expo.easeInOut

To do it without the timeline, you could have set repeat:-1 and repeatDelay:1 on your tweens, and overwrite:false on the 2nd one, but I think the timeline approach is much cleaner and it gives you an easy way to control the animation as a whole as well. For example, pause(), resume(), timeScale(), reverse(), or whatever. 


Happy tweening!

  • Like 1

Share this post

Link to post
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.