Paths build shape using anchor points, bezier curves, and creation tools, while the animation of paths develops narrative.

Create Custom Shapes

Custom shapes have editable paths to enable design and animation freedom.

To create a custom shape:

  1. Convert a basic shape–double-click the layer and confirm the prompted conversion. Converting a shape removes shape-specific properties (i.e. width, height) and any associated keyframes. Therefore, it is best to convert a shape before animating it if you plan to make customizations.

  2. Or, draw an original shape with the Pen tool.

Drawing

  • Select the Pen Tool in the Toolbar.

  • Click anywhere on the canvas to create your first point.

  • Move the cursor and click to place your next point.

    • Click, hold, and drag for curved connections.

    • Click and drop for straight connections.

  • Repeat until all points are placed.

  • Click your first point to close the path.

  • Press Return / Enter before returning to your first point to create an open path.

Rounded Corners

Each custom shape has the same set of controls on the Inspector. These can be found on the shape layer's properties panel under Blend Mode and above Fill.

  • Corner Radius: Used to shape and animate rounded corners.

  • Edit Path: Used to further customize–adjust, draw, and animate paths.

Edit Path Mode

Edit Path mode lets you select, adjust, or change properties of individual points, lines, or entire shapes. When you're editing a layer, you can interact with the existing points and the lines between them. You can also use the Pen tool to plot additional points and manipulate those as well.


To enter Edit Path mode:

  • Select a layer and click "Edit Path" within the properties panel under Blend Mode and above Fill.

  • Or, double-click the custom shape layer.

To exit Edit Path mode, press Return / Enter, double-click the layer, or select "Done Editing" in the properties panel.

Continue Drawing

In Edit Path mode, select the Pen tool to continue drawing. The Pen tool picks up from the last placed point or an open path's right point.

To draw from a specific point within a shape:

  • Click the point directly left-adjacent.

  • Select "Open path" in the properties panel.

  • Select the Pen tool.

Opening / Closing Paths

Opening and closing paths allow for precise editing and easy adjustment.

  • To open a path between two specific points, click the left point and select "Open path" in the properties panel.

  • To remove a point and open a path between its two neighboring points, click the point and press Delete.

  • To remove a point without opening the path, click the point and press "Remove points" within the properties panel.

Bézier Curves

To access a point's Bézier handles:

  1. Select a custom shape layer.

  2. Select "Edit path" within the properties panel.

  3. Click any point on the path so it is highlighted blue. If it is a curve, the handles will already be showing. If it is a corner with no handles, select "Add bezier" in the toolbar or hold ⌘ Command / Control and click the point to show the handles and create a mirrored curve.

  4. Click and drag the handles to adjust the path's curve.

  5. To remove a bezier, hold ⌘ Command / Control and click the point, or select "Remove bezier" in the properties panel.

Animating Paths

A keyframe placed in Edit Path mode marks the properties of every existing point on the path.

To create a path of animation:

  1. Select a custom shape layer.

  2. Select "Edit path" within the properties panel.

  3. Click the diamond icon ◇ in the Edit Path properties panel to place keyframes along the Timeline.

  4. Select a keyframe to:

    • Modify its path properties

    • Or, view the easing panel

Did this answer your question?