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 tutorial 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.
This tutorial covers:
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.
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).
Step 4: Drag the Playhead (3) to a desired ending time (the fourth second).
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.
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.
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.
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.
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.
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.
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.
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.
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.
- 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.
- 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.
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.
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.
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.
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.