Can You Draw an Animation Track on Google Slides

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

Adjust the curvature

Delete an anchor point

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.

Was this helpful?

How can we improve it?

Can You Draw an Animation Track on Google Slides

Source: https://support.google.com/webdesigner/answer/7411704?hl=en