Animate using keyframes

Animate using keyframes

Keyframes are the set-up positions of elements on their specific moments on the timeline. By using more than one keyframe, it is possible to linearly animate elements. Working with keyframes allows you to have elements move over the screen on the basis of a timecode. This allows you to animate elements. This can applied to a range of different elements, such as:

  • Buttons
  • Text
  • Images
  • Videos
  • Action Areas

Step 1

To start off, the element of your choice needs to be added to the timeline and the layer in which you want to place it needs to be unfolded. You can do this by clicking on the small arrow to the left side of  the layer. An extra layer with the name ‘position’ will appear below.




Step 2

Move the time-marker (white marker on the timeline) to a moment on the element, so that it will appear on the canvas on your screen. Select the element by clicking on it. Determine the desired position of the element by dragging it on the canvas. Continue by clicking on the diamond-shaped icon. You have now placed the keyframe. 



Step 3

You can easily place more keyframes by moving the time-marker to a new moment on the timeline and by moving the desired element on the canvas. The new keyframe will automatically be added. 




Removing and editing keyframes

You can remove keyframes by clicking on them with your right mouse button, and then selecting Remove keyframe. You can easily change the moment the keyframe is activated by dragging and dropping it to a location on the timeline.