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

On this page:

• Viewing motion paths
  • Anchor points
  • Control handles
• Editing motion paths
  • Editing motion path shape
  • Transforming motion paths
  • Editing animation speed
• Optimization
• Motion path properties
• Limitations

Viewing motion paths

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

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  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.

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  of the Motion path tool  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  for the Motion path tool  is selected, drag any spot on the motion path -- including anchor points -- to change the shape of the path.
• When the Motion path tool  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. Double-clicking again extends the control handles.

  To straighten a motion path, double-click both anchor points.

Delete an anchor point

• The Delete anchor point option  of the Motion path tool  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.

Transforming motion paths

You can move, resize, flip, or rotate motion paths by selecting the Motion path tool  then checking the Transform control box in the tool options bar. With this option enabled, the transform controls display when you select an element with a motion path.

Move a motion path

Drag the motion path to a new position on the stage.

Resize the motion path

• The resize box borders the motion path in blue, with handles at each corner and on each side. Drag a handle to change the size of the motion path.
• Hold the Shift key while dragging to maintain the original aspect ratio.
• Hold the Alt key while dragging to keep the motion path centered at the same spot.
• To resize the motion path in a different direction, rotate the resize box by entering the degrees of rotation in the field  in the tool options bar. You can also hold Alt (Windows) or Option (Mac) while pressing the left or right arrow key to rotate the resize box by 5°. The field always resets to 0°, so you should enter the desired rotation from the current orientation. Rotating the resize box doesn't change the orientation of the motion path itself.
• To reset the resize box orientation, double-click the inner rotation control (the smaller ring). This also resets the rotation pivot point location.

Flip the motion path

• Drag a resize handle over the opposite resize handle.

Rotate the motion path

• Drag the outer rotation control (the larger ring) clockwise or counterclockwise to rotate the motion path.
• Hold the Shift key while dragging to constrain the rotation to 45° increments.
• To move the pivot point for the rotation, drag the inner rotation control (the smaller ring) to a different place. Reset the pivot point location by double-clicking the inner rotation control (this also resets the resize box orientation).

Motion Path Editing - Google Web Designer

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  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  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.
• Image ads - The motion path tool is unavailable in image ads.