Create animations in Advanced mode

In Advanced mode you can individually animate each of the the elements you want, and optionally modify transition times and easing separately as well. Advanced mode also shows layers, which let you easily change where each element is in the stack of elements. 

Images inside canvas elements, such as the graphics created with the Pen and Shape tools, can't be changed using timeline animation. The enclosing canvas tag can be animated (to move the entire tag), but the color or shape of the image in the canvas tag can't be animated.

To animate an element in Advanced mode:

  1. Add a keyframe:
    • For individual elements: right-click the element's timeline where you want to add the keyframe added, and select Insert Keyframe from the pop-up menu.
    • For multiple elements: select the timeline tracks where you want to add keyframes, click the timeline where you want to the keyframes to be, and press F6.
    • For multiple elements: select the timeline tracks where you want to add keyframes, click the timeline where you want to the keyframes to be, and select Timeline > Add Keyframe from the Edit menu.
  2. Change the elements you want to animate. This can include moving and rotating elements, changing their color, changing their size, or changing any other parameter.
Tip: before changing the attributes of any elements on your page, be certain that a keyframe is selected. If no keyframe is selected, the changes you make won't have an associated keyframe and won't be saved.

Changing the timing of an animation

The timeline is a visual representation of the start point, end point, and length of your animations. Where the start and end keyframes are on the timeline determines when the animation starts and ends. For example, to make an animation start sooner you need to drag the start frame earlier in the timeline. The space between keyframes determines the length of time the animation takes. For example, to make the animation faster you need to have a smaller space between the keyframes. 

  • To move a keyframe, click the keyframe you want to move to select it, then drag it to a new location
  • To move an animation span (the space between keyframes) on the timeline, click the span you want to move to select it, and drag it to a new location
  • To change the easing of an animation, right-click the easing you want to change, and select the current easing from the pop up menu. In the easings dialog, choose a new easing or design a custom one.
  • To repeat an animation:
    • In the timeline layer for the element that you want to loop, click the loop button to show the looping options.
    • From the looping options popup, choose no loop, a set number of loops, or an infinite loop.

Playing your animation

As you're creating your animations, you can see how they will look by clicking the play button at the top of the animation timeline. To loop your playback, click the loop button next to the play button and then click play. Animation playback is meant to help visualize your animation only - You cannot make edits or changes to your files while the animations are playing, and it doesn't affect your previewed or published work.


Besides letting you create animations, the timeline lets you see how elements are layered on the stage. In the layer view, you can lock an element, leaving it visible, but making it un-selectable and un-editable, and you can make an element invisible, which also makes it un-selectable and un-editable.

  • To change the position of a layer in the element stack, click the layer in the timeline, and drag it to the level where you want it to be. Alternately, you can use the layer buttons  in the selection tool options bar to send layers up or down, or to the top or bottom. Changes made with the layer buttons will be reflected in the layer stack on the timeline.
  • To lock an element, click the lock icon on its layer.
  • To hide a layer, click the eye icon (or eyecon, if you prefer) on the layer that you want to hide.