Position points and position path editing
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 that represent 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.
Animate layers in any shape with position points and position path editing mode. Learn how to use Position Path Edit mode here.
Align layers as a group
We’ve introduced new ways to align multiple selected layers. With multiple layers selected…
- Use the alignment buttons at the top of the inspector to align the entire selection to itself
- 'Option + Click' the buttons to align the entire selection of layers, as a group, to the canvas borders
Fixes & Improvements
- Introduced a bunch of new keyboard shortcuts to make it easier and quicker to navigate the timeline. Check them out here.
- Released two new starter files: Rising Sun and Wavy Line. They feature animated gradients and the Trim Path effect. Check them out in the Library.
- Similar to Position Path Editing Mode, we’ve added a new “Edit Mode” UI for shape editing as well.
- Added the ability to horizontally scroll 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 to not 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 all the time. Now, preview only displays the background if you have the background property active.