Position Paths

Today, we’re introducing position points and a new position path editing mode that gives you full control over the shape your layers move without affecting the timing of your animation.

Position paths are the lines displayed on the canvas representing the path a layer follows between two position keyframes. Previously, it was very difficult to create complex position animation because you were limited to editing the two endpoints of the position path.

Today, Position Path Editing Mode unlocks the ability for you to animate layers in any shape you’d like by allowing you to add interstitial points to your path without affecting the timing or interpolation of your existing keyframes.

To enter position paths mode, select a layer that has position keyframes and use the 'Option + Enter' keyboard shortcut. The editor UI will display a blue flag on the inspector, indicating that you’re in position path editing mode. While in this mode, you can add/delete position points and edit their bezier curves. The points you create do not add new keyframes to the timeline, allowing you to control the smooth animation of your layer with the original keyframes.

Align layers as a group

We have added new features to align multiple selected layers easily. If you have multiple layers selected, you can use the alignment buttons located at the top of the inspector to align the entire selection to itself. Alternatively, you can 'Option + Click' the buttons to align the entire selection of layers as a group to the canvas borders.

Improvements & fixes

Introduced a bunch of new keyboard shortcuts to make it easier and quicker to navigate the timeline.
Released two new starter files: Rising Sun and Wavy Line. They feature animated gradients and the Trim Path effect.
Similar to Position Path Editing Mode, we’ve added a new “Edit Mode” UI for shape editing.
Added the ability to scroll horizontally on the timeline.
Fixed an issue that caused curved paths to behave unexpectedly when using the trim paths block. Now, Trim Path works as expected on any path shape.
Fixed a bug that caused the text alignment buttons not to work. Now, you can align your text within the text bounding box horizontally and vertically.
Fixed an issue that sometimes caused an error while pasting an SVG from Figma or Illustrator. Now, pasting SVGs works as expected.
Fixed an issue that caused Lottie export previews to render background layers constantly. Now, the preview only displays the background if you have the background property active.

Position Paths

Today, we’re introducing position points and a new position path editing mode that gives you full control over the shape your layers move without affecting the timing of your animation.

Position paths are the lines displayed on the canvas representing the path a layer follows between two position keyframes. Previously, it was very difficult to create complex position animation because you were limited to editing the two endpoints of the position path.

Today, Position Path Editing Mode unlocks the ability for you to animate layers in any shape you’d like by allowing you to add interstitial points to your path without affecting the timing or interpolation of your existing keyframes.

To enter position paths mode, select a layer that has position keyframes and use the 'Option + Enter' keyboard shortcut. The editor UI will display a blue flag on the inspector, indicating that you’re in position path editing mode. While in this mode, you can add/delete position points and edit their bezier curves. The points you create do not add new keyframes to the timeline, allowing you to control the smooth animation of your layer with the original keyframes.

Align layers as a group

We have added new features to align multiple selected layers easily. If you have multiple layers selected, you can use the alignment buttons located at the top of the inspector to align the entire selection to itself. Alternatively, you can 'Option + Click' the buttons to align the entire selection of layers as a group to the canvas borders.

Improvements & fixes

Introduced a bunch of new keyboard shortcuts to make it easier and quicker to navigate the timeline.
Released two new starter files: Rising Sun and Wavy Line. They feature animated gradients and the Trim Path effect.
Similar to Position Path Editing Mode, we’ve added a new “Edit Mode” UI for shape editing.
Added the ability to scroll horizontally on the timeline.
Fixed an issue that caused curved paths to behave unexpectedly when using the trim paths block. Now, Trim Path works as expected on any path shape.
Fixed a bug that caused the text alignment buttons not to work. Now, you can align your text within the text bounding box horizontally and vertically.
Fixed an issue that sometimes caused an error while pasting an SVG from Figma or Illustrator. Now, pasting SVGs works as expected.
Fixed an issue that caused Lottie export previews to render background layers constantly. Now, the preview only displays the background if you have the background property active.

Position Paths

Today, we’re introducing position points and a new position path editing mode that gives you full control over the shape your layers move without affecting the timing of your animation.

Position paths are the lines displayed on the canvas representing the path a layer follows between two position keyframes. Previously, it was very difficult to create complex position animation because you were limited to editing the two endpoints of the position path.

Today, Position Path Editing Mode unlocks the ability for you to animate layers in any shape you’d like by allowing you to add interstitial points to your path without affecting the timing or interpolation of your existing keyframes.

To enter position paths mode, select a layer that has position keyframes and use the 'Option + Enter' keyboard shortcut. The editor UI will display a blue flag on the inspector, indicating that you’re in position path editing mode. While in this mode, you can add/delete position points and edit their bezier curves. The points you create do not add new keyframes to the timeline, allowing you to control the smooth animation of your layer with the original keyframes.

Align layers as a group

We have added new features to align multiple selected layers easily. If you have multiple layers selected, you can use the alignment buttons located at the top of the inspector to align the entire selection to itself. Alternatively, you can 'Option + Click' the buttons to align the entire selection of layers as a group to the canvas borders.

Improvements & fixes

Introduced a bunch of new keyboard shortcuts to make it easier and quicker to navigate the timeline.
Released two new starter files: Rising Sun and Wavy Line. They feature animated gradients and the Trim Path effect.
Similar to Position Path Editing Mode, we’ve added a new “Edit Mode” UI for shape editing.
Added the ability to scroll horizontally on the timeline.
Fixed an issue that caused curved paths to behave unexpectedly when using the trim paths block. Now, Trim Path works as expected on any path shape.
Fixed a bug that caused the text alignment buttons not to work. Now, you can align your text within the text bounding box horizontally and vertically.
Fixed an issue that sometimes caused an error while pasting an SVG from Figma or Illustrator. Now, pasting SVGs works as expected.
Fixed an issue that caused Lottie export previews to render background layers constantly. Now, the preview only displays the background if you have the background property active.