Motion paths allow you to add highly expressive motion to elements which follow along a custom curved path. Using this feature, you can emulate real-world experiences through fluid, physics-based movements that cannot be achieved through linear motion.
Create a transition as you normally do using keyframes or the Pin. When you do so, you notice a line drawn between two anchor points (represented by triangles) as shown below:
Click the line anywhere to see the handles that you can drag to define the path using a Bezier curve. Use the Auto-Orient option to control the direction of your object as it moves along the path.
- To add an anchor point, hover your mouse on the path and click.
- To delete an anchor point, hover your mouse on the anchor, and then Cmd/Ctrl + Click
- To convert a Bezier to a sharp point, click the anchor point, and then Option/Alt + Click.
- To unlink the two handles on either side of an anchor point so that you can move one independently of the other, Option/Alt + click and drag.
Keyframes for location on the timeline represent two separate motion paths. Add a keyframe to split your path into two, or delete a keyframe to create one contiguous path. Easing can be applied to motion paths, and the easing effect is played back on a per-path basis.
- To split a motion path, add a keyframe in the timeline.
- To create a contiguous motion path, delete a location keyframe on the timeline.
- To split two adjoining motion paths in space, Cmd/Ctrl-click and drag at a joining keyframe anchor.
- To connect two end anchors of separate motion paths, drag the anchors together; they will snap to connect location.
The object is tied to the path by the transform origin. Transform origin can be adjusted so the object can follow the path off-center.
In the current implementation, motion paths cannot be set to use percentage-based layouts. To work around this, set your pathed object inside a group, parent, or symbol and set the parent to use %-based positioning. You can also use this method to set the motion path relative to top/right/bottom/left.
Click Windows > Lessons panel, and click Motion Paths for a guided, hands-on exercise on using motion paths in an Animate composition.
Allow your content to be delivered faster with your runtime files on Adobe Content Deliver Network (CDN). To do so, select the Host Runtime Files On Adobe CDN option in the Publish Settings. Your projects download faster with the benefit of cache hosting with absolutely no cost to you.
If the content needs to run offline, deselect this option in Publish Settings. This option is enabled by default.
You can now load, save, and reuse templates from a template gallery. This feature allows you to load an Animate composition for common file patterns. Templates can capture images, text, symbols, fonts, and any custom changes in your current composition. You can load templates from the visual template loader.
Access the templates menu from the Welcome screen (“Create from Template”) or from the File menu. From the templates gallery you can import, delete, and create a new composition from a template.
Template files have .antmpl extension and can be freely distributed and can be stored anywhere on the file system.
You can now bind elements with left and right swiping actions for mobile-focused experiences. You can assign the swiping action to any element in your composition. You can assign swipe gestures to the stage itself, or apply to multiple elements to create unique mobile experiences.
Right-click the element in the Timeline, click Open Actions For <element> from the menu, and then click swipeleft or swiperight.
The new Eyedropper tool is introduced in the colour selection panels. Select the eyedropper icon to sample colours from the stage.
You can now assign colors to various elements in your composition to easily identify and work with them. You can click the color palette in the Elements panel or Timeline to assign colors. These colors are reflected in the Timeline transitions too.