Timeline is the interface that we will use when we create keyframes to make animations.
- When a scene item is added to a playlist, it has 10 seconds duration as default.
- Open Scene Designer, and you will notice Timeline is located at the bottom bar.
- You can expand it by clicking on Timeline.
- Total scene duration is displayed on the left side. In the screenshot below, it is 10 seconds.
- Use the timeline view slider on the right to zoom in or out.
For animating scene elements, we use keyframes. Keyframe is a special type of marker that contains a particular parameter setting for an element. For instance, a text's horizontal position (x) may have two different values at two different points on the timeline. This means that you have two keyframes, and the text will animate horizontally between two keyframes regarding their (x) value.
Keyframes appear on the timeline as dots. We will be explaining how to use them for animations below in Creating Animations section.
To create animations, you will be using formatting options.
Let's say we would like to move OMMA text to the right, and animation should take 3 seconds. To do so, we will change the (x) value on different points on the timeline. As we change the x value, keyframes will be created automatically. In the end, the animation will look like this:
Follow these steps to create the animation:
- When blue timeline handle (highlighted as number 1) is at 0s, drag the OMMA text to the left side of canvas.
- Drag the timeline handle to 3rd second, where you want the animation to end.
- Increase the x position value of OMMA text, so the text will move to the right while its vertical position (y) stays the same.
- As you change the (x) values on different points on the timeline, keyframes will be created automatically. First one is the x position where the time is zero (highlighted as number 2), second one is the x position where the time is 3 (highlighted as number 3),
Note: Every value change on a different time point would create a new keyframe, forcing element to change its state from previous keyframe to the latest one.
- Press PLAY button on the top right corner of the timeline to preview the animation.
You can create any animation by using formatting options. In the example below, we have created keyframes by changing position, text color, and text box fill color.
Deleting a Keyframe
- Click on the keyframe you want to delete.
- Selected keyframe will be highlighted with blue border. You will see -- Keyframe Selected: 3.00s -- information with a delete icon.
- Click on the delete icon to delete keyframe.
Warning: If you press delete key on the keyboard, it will delete the item, not the keyframe. This action can't be undone.
Animating Grouped Elements
When you would like to change position, size, opacity and radius of several elements at the same time, you can group them first.
Beware that grouping or ungrouping items deletes all keyframes of items. You will be warned before executing such actions. This action can't be undone.
Other Things to Note
- Shortest animation duration is 100 milliseconds (0,1 second).
- Duplicating an item will copy all keyframes of the original item to the duplicated one. Note: Duplicated item will spawn 30 pixels to the right and bottom of original one. If you want to make both items exactly same, you should adjust values on x and y accordingly (including time zero).
Previous: 8.9 Timeline - Keyframes - Animations