How to animate objects along the path in the Figma Motion plugin

Today, we will learn how to move objects along the path.

First, let’s talk a little about what tool we will use. You can use presets animation, keyframes animation, paths animation or link animation for layer properties. We will work with paths.

Overview

You can animate objects along the path. They can rotate according to the path curvature and have X, Y and Rotation offsets.

You can have any amount of paths for any layer properties. More than that, you can have any amount of layers attached to one path.

Adding a path

To add a path to some layer, just click on a path icon. Then select a source layer and click OK in a popup dialog. The link will be added.

You can change the source layer later.

By default, the path will be added to X, Y and Rotation properties. You can change it later. If you have links for X, Y or Rotation properties, then the path will not be added for them.

Properties

Here you can change time, duration, source layer, offsets and easing.

Let’s dive into the details of these properties.

Time and duration

The first input is the start time and the second is the duration.

Source layer

While adding a path, you will attach some path to the layer properties. By clicking of the Pick source icon you can change the source layer.

You will be asked to select the source layer and then click on OK.

Keep in mind, that only vector layers are available as the source layer.

Offsets

Here you can change what properties will have a path. Properties with links cannot have a path.

You can change offset for every property. It is very useful if you have a path placed anywhere not close to the layer you animate, or you have several animated layers with the same path attached. You can tune the layer Rotation for a proper rotation while moving along the path.

Easing

You can change easing for the whole path moving.

Example

Let’s draw some rectangle and a vector path.

With the blue rectangle selected, add a path to it. Click on Add path icon, then select a path and click OK.

And that’s it! It moves along the path!

No, you can change its duration, offsets and easing by youself. Try to do it to see how it will effect.

Remember, that you can attach any amount of layers to the same path.

Conclusion

This was just a simple example of how you can move objects along the path. With help of this technique you can upgrade your animations to the higher lever.

Read this article to learn how to improve your animation with links.

Try to make your own animations and share them on Twitter or Facebook with #motion or #motionplugin hashtags.