You can create animations in Edge Animate using traditional animation methods based on keyframes. Edge Animate also provides an alternate method based on the Pin tool to create keyframes.

Create animations with the Pin tool

The Pin tool pins the property values of elements at a point in time on the Timeline. When you make an edit, the Pin tool pins the current value while you change the properties values at the Playhead. Edge Animate generates the keyframes and the transitions to or from the Playhead.

To animate with the Pin tool:

  1. Define element properties that you want to pin at a point in time on the Timeline.

  2. Click the Toggle Pin button in the Timeline panel.

    Toggle Pin button
    Toggle Pin

    Note:

    You can also activate the Pin by double-clicking the Playhead or pressing P on your keyboard.

  3. Drag the Pin on the Timeline to the location on the Timeline where you want to pin the element properties.

    Pin blue bar
  4. With the initial properties pinned, change the values of the element properties.

    Because the chevron pattern points to the Playhead, the changes are set at the Playhead location.

    Adobe Edge Animate automatically adds keyframes and transitions between the Playhead and Pin positions. You don't have to manually add keyframes or reposition the Playhead on the Timeline.

  5. Preview the animation by clicking the Play button in the Timeline panel or by pressing the Spacebar on the keyboard.

For a lesson on animating with the Pin tool:

  1. Select Window > Lessons in Edge Animate.
  2. Click Animate II: The Pin.

Creating animations with keyframes

Creating animations with keyframes
Tom Green (video2Brain)

Keyframes specify the value of a property at a point in time. When animating with keyframes, you add a keyframe at two or more locations on the Timeline and define different element properties at each location. Edge Animate uses the property values to animate the content between the keyframes.

To animate with keyframes:

  1. Select the element you want to animate on the Stage.

  2. Move the Playhead to the location on the Timeline where you want the animation to start.

  3. In the Properties panel for the element, click the Add Keyframe button (diamond button) next to the property that you want to change over time.

    Add keyframe button
    Adding a keyframe

  4. Move the Playhead to another location on the Timeline and change the value of the property.

    Edge automatically adds an ending keyframe and creates the transition.

  5. Preview the animation by clicking the Play button in the Timeline panel or by pressing the Spacebar on the keyboard.

For a lesson on animating with keyframes:

  1. Select Window > Lessons in Edge Animate.
  2. Click Animate I: Keyframes.

Edit individual keyframes

  1. Move the Playhead to a keyframe (diamond icon) on the Timeline.
  2. Change the editable property value on the left side of the Timeline panel.

Copy transitions

You can copy a transition and paste it on the Timeline of the same element or of another element.

  1. Click a transition on the Timeline to select it. When selected, an orange border appears around the transition bar on the Timeline.
  2. Press Ctrl+C (Windows) or Cmd+C (Macintosh) to copy the transition to the Clipboard.

    You can also cut the transition from the element with Ctrl+X (Windows) or Cmd+X (Macintosh).

  3. If you want to copy the transition to another element, select the element on the Stage.
  4. Move the Playhead to the location where you want the copied transition to start.
  5. Press Ctrl+V (Windows) or Cmd+V (Macintosh) to paste the transition on the Timeline.

Learn more

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy