Looping a From to To

[phantomboogie 2 Likes (Newbie)]

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. 

Thanks! 

See the Pen MeKoeo by hiytreblahiy (@hiytreblahiy) on CodePen

[GreenSock 18,240 Likes (Superhero)]

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!

[phantomboogie 2 Likes (Newbie)]

This is great. Thanks!