Animating object over path (general about centering)

[mattsrinc]

Hi, fellow GreenSock (forum) members. I'm stuck with animating an object over path, more like generally how to center say rectangle or any path to move smoothly on a path with autorotating.

 

The Codepen pen is a part from what I would like to do but can't center the green "car" e.g. so that its center (midpoint X and Y or centroid if you wish) would move on the path. This year I have created complex animation of a cube moving along the "infinite" path with calculating shadows per rotation angle - with callback function - yet cannot do this simple animation well.

 

Gray path is a rectangle, red one is nearly completed rounded rectangle with Bezier curves. The latter would be perfect but I cannot script the green rectangle to be centered on path at all times.

 

So in general how to draw, position and/or offset an object so that it will move along the path by its center (centroid)? Having a group with invisible rectangle boundaries and then animating a group along the path? And yes, I have watched the excellent 

 

Note: I'm using svg.js for some easy creation of SVG elements. Intention is to script all to have rule base path creation and then animating objects over paths. Sure, the path rounded corners will be redone with arc commands :-).

 

See the Pen BmbVvq by mattsrinc (@mattsrinc) on CodePen.

Edited December 4, 2017 by mattsrinc
Clarification, grammar changes, arcs

[OSUblake]

Don't offset the path data, set the car's transform origin to center, and you should be good. 

[mattsrinc]

Thanks but If that would work I would not even ask here. Offsets removed, transform origin set to 50% 50% (and arc based path3 added):

 

See the Pen yPwRwB by mattsrinc (@mattsrinc) on CodePen.

 

So the problem is (probably only) in getting the moving object "centered"? That's what I'm seeking e.g. how to move any (compound) path or a group on a path, centered on it and auto rotate as well.

 

ADDED: But it might work. I've commented out

TweenLite.set("#car1", {xPercent:-50, yPercent:-50});

and if all I need to do is extend the rectangle for few pixels more that's a pretty acceptable solution, thanks!

Edited December 4, 2017 by mattsrinc
Changed same 2nd pen

[OSUblake]

You can make something centered on a path by changing where it's drawn or by changing the path data offsets. What you can't do is make it auto rotate correctly unless you set the transform origin to the center.

 

So I'm not sure what the problem is. This does exactly what you want. If it doesn't, please demonstrate. 

 

TweenLite.set(whatever,{
  transformOrigin: "center",
  xPercent: -50,
  yPercent: -50
});

 

[mattsrinc]

Damn, you're right as always. I forgot the transformOrigin: "center" part.

 

Many thanks, you saved my day!