All Collections
RacontR documentation (English)
Create interactions
Using the timeline
Using the timeline

Create time-synchronised animations

Edouard Williamson avatar
Written by Edouard Williamson
Updated over a week ago

The timeline enables you to build time-synchronised animations.

Here are the different options offered by RacontR covered in this section :

  • Shortcuts

  • Details of the timeline

  • Use a video as the master media

  • Animation technique #1 : Linear

  • Animation technique #2 : Reversed animation

Shortcuts 

Here is a list of keyboard shortcuts that can help you in the timeline :

  • Keyframe click > selection

  • Shift + click keyframes > multi-selection

  • Alt + A > selects key points (in the layers) after the playback head

  • Alt + B > selects key points (in the layers) before the playback head

  • Alt + Shift + A > unselects key points (in the layers) after the playback head

  • Alt + Shift + B > unselects key points (in the layers) before the playback head

  • Alt + arrow > move the playback head to the next frame

  • Alt + shift + arrow > moves the playback head 10 frames ahead

  • Alt + arrow + selected key points  > selected key points move to the next frame

  • Alt + shift + arrow + selected key points > selected key points move 10 frames ahead

  • Alt + backspace > delete selected key points

  • Alt space > start timeline playback

RacontR’s editing timeline has been improved and activated by default (image above)

Start by importing content on your page.

  1. Here we created a rectangle.

  2. Then expand your timeline by clicking on the arrow icon on the bottom right of your screen.

  3. The timeline is now expanded and you can see the rectange showing on the bottom left.

This is where you will set actions on your element.

The timeline in detail
​

  1. Layers : this is where your layers appear. They have the same name and are ordered in the same way as in your layer stack.

  2. Click on this icon to display all the options for your layer

  3. Settings : position (vertical and horizontal), opacity (from 0 to 100%), scale (width and height), rotation (from -360 to 360°)

  4. This cursor indicates where you are on the timeline. Here for instance, you are 8 seconds into the timeline.

  5. Keypoints details : to animate your elements, you must create keypoints. You can move them along the timeline by clicking and dragging, and you can delete them with the “delete” key.

  6. Choose the visibility of your layers

  7. Add a keypoints for each of the options of your layer/element : you might want to only change one setting, such as opacity for instance. First, click on the show layer details icon, then click on the “add keypoint” icon next to the setting you want to edit. This will create a new keypoint at this timecode for this setting.

  8. Hide, show, lock and delete your layer.

  9. Timeline actions

  10. Hide, show, or lock all layers.

  11. Timeline options

  12. Play timeline (preview)

  13. Zoom in or out the timeline.

Timeline options (picture above)

  1. Click on “timeline option”

  2. A windows appears with different options : autoplay timeline - Loop endlessy - Scroll Timeline - Reading speed

Timeline actions (picture above)

  1. Click the blue square in the action layer

  2. A windows appears with different options. Pause : puts the whole timeline on pause - Redirection : goes to another page of your projet at selected timecode - Seek to : jumps back or forward to a precise timecode of the timeline - Trigger click on : Adds a dispatch click on an element.

Use a video as the master media

You can use the timeline of a video to create your experience. To do so, you will “link” your video to the timeline to it will play automatically when moving the timeline cursor. This enables you to create timely interactions at precise moments of your video (even if the user’s connection breaks down, the interactions and animation are linked to the video playing so you’ll be sure to preserve perfect timing).

Click on the clock icon next to the video layer on the timeline. When the timeline becomes blue, it means that the video is now the master media on the timeline.

Tips: Only uploaded videos can be used as master media. This can’t be done with videos from YouTube, Vimeo, Dailymotion.

Animation technique #1 : Linear

Here is a method to easily animate your 5 element settings : position, rotation, opacity, scale, visible.

Position setting
This setting enables you to move your elements. Here is how :

  1. Make sure the timeline cursor is set on timecode 0.

  2. Select the element you want to animate.

  3. Move the cursor, choose the right timecode for your animation. Set it on timecode 00:02.00 and the animation will take 2 seconds to play.

  4. Once your cursor positioned on the right timecode, move your element on your page (remember, you can keep the Shift key pressed while using the arrow keys to displace it). A keypoint is created automatically.

Rotation setting
The method is the same as for the position animation, except you have to change the rotation setting in the “Element properties” panel on the left menu.

  1. Select your element

  2. Set your cursor to the right timecode

  3. Change the rotation setting in the properties panel. A keypoint is created automatically.

Opacity setting
This is done exactly in the same way as the previous animation.

Scale setting
The scale setting impacts the height and width of your element. You can for instance create an animation to enlarge a rectangle or create a zooming effect on a picture.

  1. Select your element

  2. Set your cursor to the right timecode

  3. On your page, use the blue squares on each corner of your element to change its size. In this example, we enlarged the rectangle. For picture you might want to preserve their proportions, you can do so by keeping the Shift key pressed while resizing.

Animation technique #2 : The reversed animation

This animation technique simplifies greatly the integration work. To animate a number of elements, you begin by positioning them as they should be at the end of the animation. You’ll then go backwards in the timeline to place the elements as they are at the very beginning.

Step 1 : Create your final layout

  1. Import your elements on your page and create your layout

  2. Open the timeline

  1. By default, your layout was set at timecode “0” on your timeline. You can see keypoints created automatically (1)

  2. Move your cursor to the right timecode. Here we placed it at 00:01:40 (2) so the animation will take 1 second 40 to complete.

  3. Create new keypoints at that timecode to save your final layout. Click on the “Add keypoints” icon to do so (3)

Step 2 : Create your initial layout

  1. Set your cursor on timecode 0 (1)

  2. Let’s animate the image, select it (2) and the properties panel opens

  3. Change for instance the opacity setting to 0% (3) so it will be animated to go from 0 to 100% opacity in the animation timeframe.

  1. Your image “disappeared”. Let’s animate the two text blocks now. Make sure you are still on timecode 0 (1)

  2. Select the first text block (2) we will make it move from top to bottom (position setting).

  3. Keep the Shift key pressed and use the up arrow (3) to move your text block until it’s out of your page (it will remain visible in the editor, but won’t in preview mode)

  4. Do the same with the second text block towards the bottom (4)

Move the cursor along the timeline to make sure your animation plays properly. Congratulations, you’ve just completed your animation !

Did this answer your question?