Animation test - moving an element on a path

[jimmylet]

Hello everybody,

 

I'm trying to move an object on a defined path. As you see on the Codepen, I get there.

 

Only, I have a problem. The object I want to move does not keep its original position (as defined in the SVG) and starts animation in the middle right.

 

The problem is that it will do that with each object (I tried). If I select the icon with the brush, it will go to the same place to start. So, it's not right for me.

Can you explain to me why and try to bring me a solution?

 

 

 

thank you very much

See the Pen aYXgeX by jimmylet (@jimmylet) on CodePen

[PointC]

Hi @jimmylet

 

That icon moves over to the other side because that is the start point of the circle path. SVG circles start at the 3 o'clock position in most browsers. You could create paths with desired start points, but you have more than one icon on a path so that could prove troublesome as well. Since this is a circular orbit I think you could make things easier on yourself by rotating the entire group of icons around the center point of the circles. Something like this maybe:

 

See the Pen aYMoON by PointC (@PointC) on CodePen

 

I made a slight change to the circles so they'd all have the same cx/cy coordinates. You may also be interested in this thread as it deals with the same topic.

 

 

Hopefully that helps. Happy tweening.

 

 

[jimmylet]

Thank you very much. I had not thought of this solution!

[jimmylet]

Hmmm, I'm trying to improve the animation. With the technique I tried first, my ultimate goal was to move the different icons at different speeds.

With this technique, how can I do? As the whole svg moves, there is no way to move them at different speeds?

 

thank you very much

[PointC]

You'd just need to create separate groups for the different speeds. Something like this maybe.

 

See the Pen pLmoQE by PointC (@PointC) on CodePen

 

Happy tweening.

 

[jimmylet]

Thank you very much @PointC ! How do you calculate the SVG ORIGIN value for the rotation to be centered?

 

Because when I make a group (for example, with the two icons that are on the smallest circle), 326 326 does not seem to be the center of the SVG.
 

[PointC]

It's the center point (cx/cy) of the big circles. That's what I was referring to in my first reply when I said I had made a slight modification to your big orbit circles. Some of your big circles were at 323, 326.5 etc... so I moved all of them to a 326 326 center and animate the icon groups around that point.  

 

Happy tweening.