Timeline loop with MotionPath on circle

[manlioma]

How to avoid the "jump" of the main circle "#usHome_1" at the end of the timeline?

 

I'd like to have the same position for both circles at the start and at the end of the timeline.

 

 

 

See the Pen vYxzaGd by manlioma (@manlioma) on CodePen

[elegantseagulls]

Hi @manlioma,

 

Your js file has over 100 lines of code, could you simplify it down to just show the issue? That will make it easier for us to dive in and debug.

[manlioma]

Now is simplified

[GreenSock]

If I understand your question correctly, it's not a "flicker", it's a jump caused by the fact that your circle isn't in the correct place initially. So when the animation starts, it jumps into the correct position. You can set immediateRender: true on that first tween to make it go there immediately. 

[manlioma]

Yes, exactly. I tried with the "immediateRender: true" on the first tween, but it doesn't work. The fact is that I need to start the timeline only after 3.5 secoond. I also tried to move the circle with the attr: {cx and cy} function to move it to the initial position.. but no. 

There is a way to do something like "back to the initial position"?

[PointC]

Just my two cents, but with these circular orbits, I find it easier to use svgOrigin and just animate the rotation. (Not that there's anything wrong with using a motion path.) Here's a quick fork for you. You'd need to adjust the rotations to meet your needs, but it shows how you could do it without a motion path.

 

See the Pen 04c10b7a70911c7a16ccba3cdaf9587d by PointC (@PointC) on CodePen

 

Happy tweening.

 

[GreenSock]

23 minutes ago, manlioma said:

Yes, exactly. I tried with the "immediateRender: true" on the first tween, but it doesn't work.

Worked great for me. Can you please provide a demo showing it not working? 

 

24 minutes ago, manlioma said:

I also tried to move the circle with the attr: {cx and cy} function to move it to the initial position.. but no. 

Again, please provide a minimal demo if you'd like some help understanding why your attempt wasn't working. 

 

25 minutes ago, manlioma said:

There is a way to do something like "back to the initial position"?

Sure, but I don't really understand the context. A minimal demo that's only focused on this one thing would be very helpful. You can rewind a tween or you could record the starting position and restore it later using those variables...lots of ways to accomplish it.

 

I agree with @PointC about the approach he suggested for circular movements like this. ?

[manlioma]

Thank you very much for this solution. Here the final demo!! 

See the Pen VwpGGBo by manlioma (@manlioma) on CodePen