Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
manlioma

Timeline loop with MotionPath on circle

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Now is simplified ;)

Link to comment
Share on other sites

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

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

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

 

 

  • Thanks 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.
×