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

Using the scroll timeline

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

With the scroll timeline function, you can synchronize the timeline and content of your project. Then it will be possible to scroll the timeline using the mouse or ipad!

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1447670610382{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][vc_column_text letter_spacing=””]In order to make this tutorial by yourself, download this files with all images!

If you use your own images for this tutorial and wish to know how to export your Jpg and Png graphic elements, we invite you to consult this link and carry it out either underPhotoshop or thegimp.

Once your project is configured and your images are imported to Racontr, we will be able to get to heart of the matter beginning by creating a page and entering into the page editor.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”50px”][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=””]

1. To do so, go to the configuration tab of the timeline.
2. Activate the “Scroll Timeline” by clicking on the checkbox.
3. If you like, you can adjust the scroll’s speed in “Speed Timeline”. You will then be able to vary the running speed of your animation. For example, if you use a mouse with a scroll wheel, the running will be slower than on a track pad. It is therefore important to adjust this parameter consistent with your hardware.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5656″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463669898982{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 letter_spacing=””]Inversed Kinematics is an animation technique based on the respect of angular constraints of the articulations of an object. This simplifies considerably the animator’s task, given that to move a group of objects, for example, you only have to determine in which position they must end up in, at the end of a movement, and the intermediary steps will be automatically calculated.

First step

1. To begin, place your cursor on time “0”.

It is recommended on Racontr to import all the elements to the very beginning of the timeline, time “0” and to position them according to their position of appearance. Once done you can hide any of the items and make them appear at any given moment on the timeline.

2. Now import your medias into the page.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”606″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447673209804{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]Step 2

3. Create your layout as it should be at the end of the animation.
4. Once done, slide the timeline cursor enough so that your animation can take place.
5. Click now in-between your layer’s arrows to fix their positions.
6. Key frames then appear on the timeline. Repeat the operation on all the layers concerned.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”609″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447673721721{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]Step 3

Now you are set to create the animation.

Slide your cursor to the beginning of your animation (on time “0”) where your keys are, then on your scene slide your elements.

To do so, select them one by one and with your keyboard arrows, slide them. A click on the top arrow of your keyboard corresponds to a one pixel displacement.

For a quicker result, continue with the arrows and simultaneously keep the “shift” key pressed.

The movement will operate 10 pixels at a time. You can then slide your cursor from right to left to check the animation.

Launch a preview in order to play your animation with the scroll.[/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 4

We are now going to create a transition.

1. Use the same method, move forwardon the timeline.
2. Then add keys to the layers (this will allow the elements to stay a certain time on the page)
3. Move furthergiving sufficient time so that thefinal animation can run.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”615″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]Step 5

4. Without necessarily adding new keys on the timeline (they will automatically appear when you move an element), as previously explained,
5. you must realize your final animation as you wish, from right to left or from bottom to top, by simply displacing you images or texts.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”618″ img_size=”full” onclick=”link_image”][/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][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]For this exercise you will need two images: one focused and one blurred (use your external DTP software to create these images). If you wish, you may use the pictures attachedto this tutorial.

To make it clearer, and so that they don’t bother you for the following steps.

1. Start by hiding your previous animation.
2. To do so, click on the eyeto hide them.
3. Once done, slide your cursor on time ?0, then import both images onto the scene.

Place them in such a manner that the two images, the focused and the blurred one, are perfectly overlapped.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”624″ img_size=”full” css=”.vc_custom_1447675700510{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]Your images are now set on top of each other, select the blurred image by clicking into it, then in the image proprieties change its opacity to “0”.

To give the impression that the image is blurring, we will make the blurred picture appear on top of the focused picture by playing with its opacity level.

Return onto the timeline and mask the images.[/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=””]

7. To create the appearance of the image animation (ie: The inverted kinematics method), move the timeline until the previous animation disappears.
8. Click on the two layers “eye icon” to make them disappear on the scene.
9. Add keys into them in order to fix their position.
10. Again move forward on the timeline, enough so that the animation can take place (approximately one second) and add keys.
11. Now displace your timeline onto the previous key frames and select the two layers(focused and blurred) in the layer panel.
12. Hold down the “shift” key to move the layers10 pixels at a time.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”630″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]To create the effect we will play with the opacity level. The blurred image will progressively appear giving the impression of a photographic blur (see video below). Move forward on the timeline and then set the blurred image’s opacity on 100%.[/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″ 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]