setting repeat separatly for a series of .from and .to animations

[ABA]

I have series of particalse animations each animation starts from a random position in the screen to a specific point  eventually forming a shape like a square or a hexagon rotating around central point. what I want is to make the .from() occur only once and .to() repeat indefinitly?

See the Pen oNLKwdj?editors=1111 by abdulsalamalmahdi (@abdulsalamalmahdi) on CodePen

[ZachSaucier]

Hey ABA. We highly recommend that you use the new syntax:

Also note that you don't need to have custom random functions because you can just make use of GSAP's random utility method.

 

As for your question, if you don't want the .from() tween to repeat infinitely then you shouldn't include it in the infinitely repeating timeline. In situations like these where you are wanting to affect the same properties of the same objects with different animations it's usually easiest to use layered animations. With DOM elements that's easy because you can just use an empty container element and animate that instead, but with canvas it's a little more complex. I might use some custom properties (like addedX and addedY or something) that are added to the x and y values in a modifier. Then you animate the addedX and addedY using the .from() and can leave what you have for the other tweens.