Search
Clear search
Close search
Google apps
Main menu
true

About motion paths

Motion paths let you animate objects moving along curves and complex shapes. Similarly to lines drawn with the pen tool, you define motion paths by setting anchor points which are then connected by straight or curved lines.

Motion path animation is approximated by CSS, so animated elements may not exactly follow their motion paths. Generally the difference shouldn't be noticeable (by default, less than a pixel), and you can limit the extent of the deviation in the motion path properties.

Motion Paths Overview - Google Web Designer

Viewing motion paths

Select a single element or group to see lines indicating where it will move during animation, along with the anchor points.

example motion path

You can only view one motion path at a time.

Anchor points

Anchor points are set by two ways:

  • Thumbnails or keyframes that specify a new x or y position for the element automatically generate anchor points. The starting and ending anchor points are always at keyframes.
  • You can add anchor points along the motion path using the Motion path tool.

Control handles

Control handles are visible when the Motion path tool Motion path tool icon is selected. Each segment between anchor points has two control handles, one attached to each anchor point. The length and direction of a control handle indicate the degree of the motion path's curvature. For straight lines, control handles lie flush against the segment or are collapsed.

example motion path with control handles

Editing motion paths

Editing motion path shape

Motion paths can be simple curves, closed shapes such as polygons and circles, or detailed outlines of other objects. To change the shape of a motion path:

  • Add an anchor point
    • Add a thumbnail or keyframe that changes the position of the element. This adds an anchor point where you can change the easing.
    • The Add anchor point option Icon for the "Add anchor point" option for the Motion path tool of the Motion path tool Motion path tool icon lets you click a spot on the motion path to add an anchor point, fixing the motion path there. Adding an anchor point using this method doesn't add a thumbnail or keyframe.
  • Adjust the curvature
    • When the Selection tool or the default option default option icon for the Motion path tool for the Motion path tool Motion path tool icon is selected, drag any spot on the motion path -- including anchor points -- to change the shape of the path.
    • When the Motion path tool Motion path tool icon is selected, drag the control handles to change their length and angle, affecting the motion path's curvature. If another control handle is attached to the same anchor point, the other control handle automatically adjusts its angle to match unless you hold down the Alt key.
    • Double-click an anchor point to collapse the attached control handles. (A segment with both control handles collapsed is a straight line.) Double-clicking again extends the control handles.
  • Delete an anchor point
    • The Delete anchor point option Icon for the "Delete anchor point" option for the Motion path tool of the Motion path tool Motion path tool icon lets you remove an existing anchor point by clicking it. Deleting an anchor point corresponding to a thumbnail or keyframe without any animated properties other than the motion path also deletes the thumbnail or keyframe.
    • Deleting a thumbnail or keyframe deletes the segment of the motion path that ends at that thumbnail or keyframe.

Editing animation speed

Control the speed of an object along its motion path by changing the timing of the thumbnails or keyframes and the easing between them. You can also loop motion path animation.

Anchor points added with the motion path tool don't affect animation speed. Add a thumbnail or keyframe instead.

Optimization

Whenever you create or edit a motion path, Google Web Designer automatically optimizes the animation, reducing the amount of CSS used to render it while observing the tolerances you specify in the motion path properties. The lower the tolerances, the closer the animation follows the motion path, but less optimization is possible.

For additional compression, click Optimize curve Optimize curve button in the motion path properties. This process can take more time than automatic optimization.

Google Web Designer displays the estimated size of the selected element's motion path in the Properties panel, reflecting how much disk space the motion path will take after publishing the document.

Motion path properties

Motion path properties appear in the Properties panel once you add an anchor point with the Motion path tool or edit the motion path to curve.

Property Description
Orient to path When enabled, the element rotates during animation to face the direction of the motion path (e.g., while following the downward curve of a motion path, the element tilts downward). Control the precision of the rotation with the Angle tolerance property.
Position tolerance Sets how far the element can deviate from the motion path.
  • Default: 0.5px
  • Minimum: 0.1px
  • Maximum: 100px
Angle tolerance Controls how much the element's orientation can differ from the motion path's orientation. Only applicable if the Orient to path option is enabled.
  • Default: 1°
  • Minimum: 1°
  • Maximum: 360°
Optimize curve Click the Optimize curve button button to reduce the size of the CSS used to generate the motion path animation. After optimization, the button is disabled until the motion path changes.
Size estimate Displays an estimated size of the motion path. For additional compression, use the Optimize curve button.

Limitations

  • Top/left positioning - Motion paths don't support top/left positioning. Use the CSS transform property instead (this is the default).
  • 3D animation - Google Web Designer doesn't support 3D motion paths. You can apply 3D translations separately to the element.
  • CSS panel - The CSS panel doesn't affect motion paths, although styles are still applied to the element itself.
  • Code view - You can't view or edit motion paths in Code view.
Was this article helpful?
How can we improve it?