How to create motion paths using SVG in anime.js

A motion path is a line upon which an object moves. We can create motion paths using CSS properties like left and top or CSS transform properties like translateX, translateY, and so on. However, making complicated motion paths involving curves and rotations may become challenging.

Instead, anime.js allows us to create motion paths using SVG. This allows us to easily create a path using an SVG editor, load it into our HTML file, and then use this path as a basis for movement.

Syntax

We can use an SVG as a motion path by using the path() method provided by anime.js. The syntax is as follows:

Here, the pathid is the ID given to the <path> tag that we want to use as the motion path. The path() method returns a function into motion_path. This returned function takes one of three parameter values 'x', 'y', and 'angle':

• motion_path('x'): It returns the current X pixel coordinate in the SVG path.

• motion_path('y'): It returns the current Y pixel coordinate in the SVG path.

• motion_path('angle'): It returns the current angle of rotation in the SVG path. The value returned is in degrees.

These function calls can be used in conjunction with translateX, translateY, and rotate properties to move the targeted element along the SVG path.

For every frame of animation, the translateX, translateY, and rotate properties are updated to their next value according to the SVG path.

Code example

The following example shows the use of motion paths. We create a simple SVG path using an SVG editor and move a box along that path:

Code explanation

In the HTML section, we create the path element for the motion path and the div element that will be moving.

• Line 8: We create the box using a div element and style it using the box class. We give the element an ID of box1.

• Lines 10–14: We create an SVG and use a single <path> tag to define the path the box will follow. We give this <path> tag the ID path.

In the JavaScript section, we create the animation.

• Line 1: We get the motion_path() function using the path() method. We pass the ID of the <path> tag that we want to use as the motion path.

• Lines 2-10: We create an animation using the anime() function.

  • Line 3: We target the box using its ID.

  • Line 4: We set the translateX property to the result of motion_path('x'). For each frame, the translateX property will be set to the next X coordinate according to the motion path.

  • Line 5: Similar to line 4, we set the translateY property to the result of motion_path('y').

  • Line 6: Similar to line 4, the rotate property is set to the return value of motion_path('angle'). For each frame, the box will rotate according to the motion path.

  • Lines 7–9: We give additional parameters to control the motion, duration, and repetition.