Jump to content


Looping a From to To

Go to solution Solved by GreenSock,

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

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. 


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

Link to comment
Share on other sites

  • Solution

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