What are Position Paths and Position Path Points?

Diagram depicting position paths and position points

1. Position Paths

A Position Path is a line displayed on the canvas that represents the path a layer follows between two position keyframes. This path is not rendered on export and serves only as an indicator for you to know where a layer will go over time.

The two endpoints of a position path are diamond shapes, and they represent the keyframe values of the position property. The dots along the position path represent the interpolation of the layer. Closer dots mean the layer will move slower and further spaced dots mean the layer will move quickly.

2. Position Points

Position Points are interstitial points on Position Paths that store position data but not time data. This means you can manipulate the shape/complexity of a position path with position points without affecting the timing of a position animation.

Position points are not displayed on the timeline, since they do not have any temporal value. Instead, you can access position points on the canvas while in Position Path Edit Mode.

Position Path Edit Mode

Position Path Edit Mode is a special editor state that gives you full control over manipulating position paths and position points.

How to enter position path edit mode

You can only edit the position paths of any layer that has existing position keyframes.

Activate position path edit mode in any of the following ways:

  • With a layer selected, use the Option + Enter hotkey.

  • With a layer selected, find the layer's position property on the inspector. Click the squiggle icon next to the position keyframe button.

  • With a layer selected, double-click any of the keyframes on the layer's position path displayed on the canvas.

Editing position paths

While in position path editing mode, you can:

  • Add/delete points along the path

  • Edit bezier curves of any of the keyframe points or position points

Because position points do not have temporal data, these path adjustments do not affect the timing or interpolation of your existing position keyframes. This means that any adjustments you make on the canvas will not create new keyframes on the timeline, so you'll be able to control the timing of your animation with the endpoint keyframes of your position path.

Influencing Time

Screenshot of the easing blocks on the Fable inspector

When in Position Path Edit Mode, the inspector will contextually adjust to display position point settings. When you have a position point or keyframe selected, the Influence Time setting will appear. This is a toggle-able setting that allows you to convert position points into keyframes and vice-versa.

Position points do not have temporal data, so they do not have the influence time setting enabled. On the contrary, keyframes do have the influence time setting enabled and you can view/adjust the keyframe's easing settings.

⚠️ You cannot convert the first or last keyframes of a position path into position points.

Did this answer your question?