[vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1446806148535{margin-bottom: -10px !important;}”]

Using the timeline

[/vc_column_text][vc_column_text css=”.vc_custom_1446806170008{margin-right: 5% !important;}”]

The editing timeline enables you to build a time-based interface.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1446811962342{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Here is a list of keyboard shortcuts that can help you in the timeline :

• Keyframe click > selection
• Click + shift keyframes > multi-selection
• Alt + A > selects key points (layers made) after the playhead
• Alt + B > selects key points (made of layers) before the playhead
• Alt + Shift + A > unselects key points (layers made) after the playhead
• Alt + Shift + B > unselects key points (layers made) before the playhead
• Alt + arrow > move the playhead to a frame
• Alt + shift + arrow > moves the playhead 10 frames
• Alt + arrow key point selected > selected key point moves a frame
• Alt + shift + arrow key point selected > selected key moves the point of 10 frames
• Alt + backspace> deletes the selected key point
• Alt space> read puts the timeline

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5669″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463671409596{margin-right: 5% !important;}”][vc_empty_space height=”10px”][vc_column_text letter_spacing=””]Racontr’s editing timeline has been improved and activated by default.

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.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][/vc_column_inner][/vc_row_inner][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_single_image image=”527″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446814758413{margin-right: 5% !important;}”][vc_empty_space height=”20px”][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text letter_spacing=””]

1. Layers: This is where your layers appear. They have the same name and are ordered in the same way that in your layer stack.
2. Click on this icon to display all the editable settings of your element.
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. Keyframes details: To animate your elements, you must create keyframes. 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

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text letter_spacing=””]

7. Add a keyframe for one of the settings of the 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 keyframe” icon next to the setting you want to edit. This will create a new keyframe at this timecode for this setting.
8. Hide, visible, lock and delete your layer.
9. Timeline actions
10. Hide, visible, and all layers.
11. Timeline options
12. Play timeline (preview)
13. Zoom in or out the timeline.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”50px”][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”5663″ img_size=”full” onclick=”link_image”][vc_column_text]Timeline options

1. Click on “timeline option”
2. A windows appears with different options:
   Autoplay timeline
   Timeline Loop endlessy
   Scroll Timeline
   Reading speed

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”5666″ img_size=”full” onclick=”link_image”][vc_column_text]Timeline?actions

1. Click the blue square in the action laye
2. A windows appears with different options
   Pause: puts the whole timeline on pause
   Redirection: go to another of your projet at this timecode.
   Go to: jump back or forward to a precise timecode of the timeline
   Add a dispatch click on a element.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]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 icon next to the video layer on the timeline
When the timeline will be blue, it signifies that the video is now the master media on the timeline.[/vc_column_text][vc_column_text letter_spacing=””]Tips: Only uploaded videos can be used as master media. This can’t be done with videos from YouTube, Vimeo, Dailymotion.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]Here is a method to easily animate your elements 5 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 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 keyframe is created automatically.

 

Congratulations! You’ve just completed your first timeline animation.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]Rotation setting
The animation method is the same as for position, except you have to change the rotation setting from 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 keyframe is created automatically.

 

Opacity setting
It is done exactly in the same way that for rotation.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]This animation technique simplifies greatly the integrating work. To animate a number of elements, you begin by placing them as they should be at the end of the animation. You’ll then go back in the timeline to position the elements as they are at the very beginning (see the video below).[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]Step 1 : Create your final layout

1. Import your elements on your page and create your layout
2. Open the timeline

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”552″ img_size=”full”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]

1. By default, your layout was set at timecode “0” on your timeline. You can see keyframes 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 keyframe at that timecode to save your final layout. Click on the “Add keyframes” icon to do so (3)

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”555″ img_size=”full”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”558″ img_size=”full”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]

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)

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”561″ img_size=”full”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]Move the cursor along the timeline to make sure your animation plays properly. Congratulations, you’ve just completed your interface![/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]