Jump to content
Search Community

Timeline loop with MotionPath on circle

manlioma test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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. 

Link to comment
Share on other sites

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"?

Link to comment
Share on other sites

  • Solution

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.

:)

 

  • Like 6
Link to comment
Share on other sites

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

  • Like 2
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.
×
×
  • Create New...