Continuous Loop with Motion Path

[swansondesigns]

Hello,

 

I'm working on an animation with some images of planets and I thought it would be a good idea to get an SVG of a circle to use as a motion path so that I could place the SVG on the page using CSS and then animate my elements along the path.  That part works, but the animation runs smoothly through and then stops before starting the next loop.  I could do an "onComplete" function to reset it but that doesn't seem like the "right" way to do it.  Is it?  Am I missing something simple?

 

Also, if this is just not a good way to approach this kind of thing I'm open to learning a better way.

 

Thanks,

Graham

See the Pen PoBLPYz by swansondesigns (@swansondesigns) on CodePen

[swansondesigns]

OK, of course, as soon as I submit the new topic I find information on it.  I Googled before creating the topic I swear!!

 

Anyway, this forum topic has a really nice solution for animating easily along a circle.

 

 

And, in case anyone else finds this because they had the same issue, it was because I was adding the ease to the timeline declaration directly instead of inside "defaults".  I thought I had added an ease to the individual tweens but I guess I didn't.  This is what it looks like when working properly.

 

See the Pen wvxOKeq by swansondesigns (@swansondesigns) on CodePen

 

I am still open to any tips if there are improvements I could make here.  I'm going to see what I can learn from the topic above but man that math looks scary! 

[GreenSock]

3 hours ago, swansondesigns said:

but the animation runs smoothly through and then stops before starting the next loop.

That's just what MotionPathHelper does by default. It's only meant for previewing/building the path. Just remove that MotionPathHelper and you'll see that the looping is seamless (right?) 

 

There are a lot of approaches to a challenge like this. It's fine to use a motionPath, or to just do the rotation-with-child-counter-rotation thing (I personally like that one best). This thread may also help:

 

Glad you figured out a solution. Thanks for posting back. 

 

Have fun!