<animateMotion>

The animateMotion element allows you to animate an object along a path.

Let’s start by animating a circle along a star path. First we create the circle and the star. Make sure to put the circle at the 0,0 coordinate.

Now let’s add the animateMotion element. You’ll see that it looks similar to what you’d see with <animate> and <animateTransform> except for the path attribute.

Now let's copy the “d” contents of the path and paste it into the “path” attribute of the animateMotion element.

Something that may have been lost in the example is how the object being animated (in this case, the circle) has to be centered at the origin. Check out what happens when the circle is NOT centered on the origin.

Let’s try to replicate a simple version of the car traveling on the road shown in the intro to this section. Instead of a car, we’ll use a simple rectangle. Notice how the rectangle is drawn so that it’s center sits at the origin.

The rectangle is properly centered, but we want its orientation to match that of the path, so that it always points in the direction of the animation.

Fortunately for us, it’s an easy fix. Simply add the rotate attribute and set it to “auto.”

What if we want to animate a more complex object around the path, like this car?

Let’s add the car to <defs>, and place it in the svg with the <use> element

Now we’ll animate it. As you can see, the animation is off, just like the rectangle we animated earlier.

In order to center the car at the origin, we’ll need to add a transform to it’s group. Since the car is 50x30, we’ll need to translate it by -25 and -15 to center it. Now the animation looks much better!

As a final touch, lets swap out the star path for another star with rounded corners, so the car can turn more smoothly:

mpath

If you want multiple objects to move along the same path, you can use the mpath element to specify the path for animateMotion element (instead of using the path attribute). Pass the path via the href attribute.

<mpath href="#path-id" />

Check out the full example on codepen.

animate attributes

1. id - needed to chain animations, i.e begin=”first.end”
2. href - (needed if animate element is not encapsulated by the element you wish to animate)
3. attributeName=<name of attribute>
4. from - <value>
5. to - <value>
6. begin - <value>

• time in seconds - ex. from=”2s”
• time based on beginning of another animation -ex. from=”firstAnim.begin”,
• time based on end of another animation - ex. from=”firstAnim.end”
• time based on begin or end of another animation + time offset - ex. from=”firstAnim.end+2s”
• click interaction - ex. begin=”click”

7. dur - <value>

• time in seconds (s) or milliseconds (ms) - dur=”5s”

8. repeatCount - <value>

• number - repeatCount=”4”
• indefinite- ex. repeatCount=”indefinite”

9. fill

• freeze
• remove

10. calcMode - <value> - used to set pacing, animation curves, type of motion

• linear
• discrete
• paced
• spline

11. values

• Animation values, used with keyTimes to dictate the pace of the animation - ex. values=”20; 50; 300”

12. keyTimes

• List of values from 0 to 1 used to to dictate the pace of the animation - ex. keytimes=”0; .3; .9; 1”

additional attributes for animateTransform:

1. attributeName - ”transform”
2. transform-origin - “<x> <y>” default is “0 0”
3. type - ”<type keyword>”

• translate
• rotate
• scale
• skewX, skewY

additional attributes for animateMotion:

1. path - ”<path data>”
2. mpath - <mpath href="#id-of-path" />