(Last Updated: October 3, 2017)

Saola Animate brings your website to life with HTML5 animation and interactive web content. Advanced features and intuitive user interface let you create compelling visual experiences with ease. Today’s article describes how to create motion paths in Saola Animate. Motion paths allow animating objects along complex curves to mimic real-life motion, giving objects the illusion of life.

Creating Motion Paths

A motion path is a curved animation between two or more points. To create a motion path, first create a basic path between two keyframes. Basically, the steps to create a linear motion path are similar to those used to create HTML5 animation.

Step 1: Select an element.

Step 2: In the Properties pane, switch from X, Y Motion to Motion Paths. This removes all animations of X/Y/Left/Top/Right/Bottom property of an element.

switch to motion paths

Note: You can only switch to Motion Paths when the element’s position is “relative to top and left”. Otherwise, Motion Paths will be disabled.

Step 3: Click the keyframe diamond (1) to add a Location keyframe (2) at a desired starting time (the zero second).

motion path starting keyframe

Step 4: Drag the Playhead (3) to a desired ending time (the fourth second).

motion path ending keyframe

Step 5: Click the Add Keyframe button (4) to add an ending Location keyframe (5).

Step 6: On the Canvas, drag the element to a new position. This creates a red line indicating the path of the motion. The Location property value changes, thus animating the element along a motion path.

motion paths 1

Repeat step 4, 5, and 6 many times to create a motion path between many points.

With these above steps, you’ve done creating a straight motion path between points. Edit the motion path by adding and modifying its anchor points.

Editing Motion Paths

You can edit a straight path easily to make an element travel in a curve. Editing a motion path is actually working with its anchor points. Anchor points are circle points on a motion path that define the path. There are two types of anchor points:

  • Key anchor points: Yellow points that have associated Location keyframes on the Timeline.
  • Normal anchor points: Green points with no associated keyframes on the Timeline. They define the path an element moves between two key anchor points.

Each anchor point except the first/last key anchor one has two blue handles with a control point at their ends.

motion paths 2

Creating Anchor Points

  • To create a key anchor point, add a Location keyframe at a desired point of time. In the figure below, a Location keyframe (6) is added at the third second, creating an associated key anchor point on the motion path.

motion paths 3

Location keyframes represent two separate motion paths. So, you can add a Location keyframe to split a path into two. Or, delete a Location keyframe between two paths to create a contiguous path.

  • To create a normal anchor point, hover over a motion path until the mouse pointer turns into a pointing hand. Then, click and drag the path as desired.

motion paths 4

Note: When the Playhead is on a Location keyframe, an element is on a corresponding key anchor point. In that case, drag the element to change the shape of the path.

motion paths 5

On the other hand, when the Playhead isn’t on a Location keyframe, dragging the element is equal to dragging the entire path. The shape of the path remains the same.

motion paths 6

Adjusting Control Points

With any anchor point selected, its control points appear to help adjust the path between two anchor points. Drag the control points to modify the motion path.

motion paths 7

When dragging a single control point, the remaining control point will move to keep the angle between them unchanged. If you want to change the selected point only, hold down ALT and drag the point.

motion paths 8

Note: If a control point and an anchor point have the same position, when you click the point, the anchor point will be selected. If you want to select the control point, hold down ALT and then click the mouse button.

Deleting Anchor Points

To delete an anchor point, click it while holding down SHIFT.

If you delete a key anchor point, either of the following cases happens:

  • The key anchor point is the first/last point of a motion path AND there is no anchor point between this point and the next/previous key anchor point: The associated Location keyframe will be deleted.

In the figure below, there is no anchor point between the last and the previous key anchor point (7). Therefore, deleting the last key anchor point is equal to deleting the last keyframe.

motion paths 9

  • The key anchor point is the first/last point of a motion path AND there is an anchor point between this point and the next/previous key anchor point: The next/previous anchor point will become the first/last key anchor point of the motion path.

In the figure below, there is an anchor point (8) between the first and the next key anchor point. So, when you delete the first key anchor point, the anchor point (8) becomes the first key anchor point of the path.

motion paths 10

  • The key anchor point is not the first/last point of a motion path: The associated Location keyframe will be deleted.

In the figure below, the key anchor point (9) is neither the first nor the last key anchor point. Because of this, deleting it removes its associated keyframe.

motion paths 11

Note: If you click an anchor point and press DELETE without holding down SHIFT, you will delete the element together with the entire motion path.

Rotating Motion Paths

It’s possible to rotate a motion path. Do the following steps:

Step 1: Position the Playhead on a Location keyframe, so an element is on a key anchor point.

Step 2: Click to select the element. The motion path appears on the Canvas.

Step 3: Hold down ALT, and then click and drag the path. The motion path will be rotated around the element’s transformation-origin point.

motion paths 12

Moving Motion Paths

You can move a motion path without changing the relative movement of an element. Moving the motion path only change the element’s starting and ending position.

Step 1: Click to select an element. The motion path appears on the Canvas.

Step 2: Hold down CTRL, then click and drag the path to a different place.

motion paths 13

Note: As stated earlier, when the Playhead isn’t on a Location keyframe, dragging an element is equal to moving the entire path. The path’s shape stays unchanged.

Orienting Elements to the Path

Imagine you want to animate a car to drive up a slope. As the slope is not a straight line, you need to use a motion path to move the car. However, even with a motion path, the car’s movement is still unnatural. It’s because the nose of the car doesn’t orient along the direction which it is heading.

To solve this problem, use the Auto-Orient property to orient elements in relation to the direction of the motion path.

auto orient object to path

Note: If the right edge is not the “front” of an image, you may need to rotate the element so that the correct edge is on the right side. For example, if the car is moving to the left direction with Auto-Orient on, it will flip vertically. In that case, rotate the image by 180 degrees to avoid flipping.

That’s all about creating motion paths in Saola Animate. Try Saola Animate today to build engaging HTML5 animation and interactive web content. Feel free to contact us if you need any support.

Join our mailing list to receive the latest news and updates from our team.

A confirmation email has been sent to your mailbox, please confirm your subscription!

Pin It on Pinterest