Jump to content

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

Animating object over path (general about centering)

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 by mattsrinc
Clarification, grammar changes, arcs
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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 by mattsrinc
Changed same 2nd pen
Link to comment
Share on other sites

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. 


  transformOrigin: "center",
  xPercent: -50,
  yPercent: -50


  • Like 4
Link to comment
Share on other sites

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


Many thanks, you saved my day!

  • Like 3
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.