Share Posted June 10, 2021 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 More sharing options...
Share Posted June 10, 2021 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted June 10, 2021 Now is simplified Link to comment Share on other sites More sharing options...
Share Posted June 10, 2021 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 More sharing options...
Author Share Posted June 10, 2021 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 More sharing options...
Solution Solution Share Posted June 10, 2021 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. 6 Link to comment Share on other sites More sharing options...
Share Posted June 10, 2021 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. 👍 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 10, 2021 Thank you very much for this solution. Here the final demo!! See the Pen VwpGGBo by manlioma (@manlioma) on CodePen 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now