[vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”540″ 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_1447759156415{margin-bottom: -10px !important;}”]

The reversed animation

[/vc_column_text][vc_column_text css=”.vc_custom_1447759174457{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=”50px”][vc_column_text css=”.vc_custom_1447759215498{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row][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]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][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/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]

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=”755″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447759492846{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

1. By default, your layout was set at timecode ?0? on your timeline. You can see keyframes created automatically
2. Move your cursor to the right timecode. Here we placed it at 00:01:40 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

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”758″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447759557182{margin-right: 5% !important;}”][/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=”30px”][/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]

1. Set your cursor on timecode 0
2. Let?s animate the image, select it ?and the properties panel opens
3. Change for instance the opacity setting to 0% 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=”761″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447759644941{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

1. Your image ?disappeared?. Let?s animate the two text blocks now. Make sure you are still on timecode 0
2. Select the first text block we will make it move from top to bottom (position setting).
3. Keep the Shift key pressed and use the up arrow 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

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”764″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447759692879{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]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=”540″ 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]