SMIL Animation: animateMotion

One of the most impressive features of SMIL is the ability to move an object along a complex path using the <animateMotion> tag.

While moving an object in a straight line is easy with <animate>, <animateMotion> allows you to follow curves, loops, and zig-zags defined by a standard SVG <path>.

Basic Syntax

You can define the motion path directly inside the tag using the path attribute, or you can reference an existing path elsewhere in your SVG using the <mpath> tag.

The `rotate="auto"` Attribute

By default, an object following a path will maintain its original orientation. However, in many cases (like a car driving or a plane flying), you want the object to turn as it follows the curves of the path. Setting rotate="auto" tells the browser to automatically rotate the object so that it remains tangent to the path at every point.

Controlling Speed with `keyPoints` and `keyTimes`

By default, an object travels along its path at a constant speed. However, you can create more complex, non-linear motion (like a car slowing down for a turn and then speeding up) using the following attributes:

keyTimes: A semicolon-separated list of time values between 0 and 1 (e.g., 0; 0.7; 1). These define the "checkpoints" in the animation's duration.
keyPoints: A semicolon-separated list of values between 0 and 1 (e.g., 0; 0.2; 1). These define how far along the path the object should be at each corresponding keyTime.

For these to work, you must also set calcMode="spline" (for smooth transitions) or calcMode="linear".

Example: Moving Along a Path

In this example, a small triangle follows a curved path. Notice how the triangle rotates to point in the direction it's traveling thanks to rotate="auto".

View Output

Example: Variable Speed along a Path

In this second example, we use keyPoints and keyTimes combined with keySplines to make the triangle slow down as it reaches the peak of the curve, then speed up as it descends. This creates a much more physics-based, natural feeling of gravity.