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. 



    • Related Articles

    • Using Input Field

      The Input Field component allows you to create and edit variables. Variables are elements that can assume a certain value. A variable consists of a key and a value. The key is the ‘label’ of the variable, and is used to identify the variable. The ...
    • Metadata in URL using parameters

      Metadata in URL using parameters There are ways to give extra information to the interactive video from external information sources. One of these ways is to add some code (parameters) behind the project link to add meta-data. This way you can add ...
    • Using Email Gate

      The Email Gate component allows you to collect email addresses from viewers. Viewers can submit their emailadres by way of a simple form. The contact details will be sent to a mailbox of your choice. This direct method of lead generation adds to an ...
    • Using Contact Form

      The Contact Form component is a user-friendly and flexibly deployable contact form. With this ‘form builder’, you can create form for different purposes. You can for example have your target audience make contact, but you can also use this feature to ...
    • Personalize using postMessage

      PostMessage is a safe method to communicate between different domains, for example between a website and an embedded Ivory player (iFrame). This allows you to personalize video’s realtime. The data is sent directly from a webpage to the iFrame, ...