<div>
Already familiar with Atomic and looking to level-up by learning the Advanced Motion Timeline? This tutorial is for you! Grab yourself an iced cold latte and take a seat &ndash;&nbsp;this tutorial could take you anywhere between 10 and 30 minutes depending on your level of Atomic experience.
If you&rsquo;re looking for a beginner-level tutorial, <a href="https://medium.com/@we_are_atomic/tutorial-how-to-make-a-hi-fi-prototype-in-atomic-in-under-10-minutes-f8a49e7eebfe#.cu85b6n46">check this one out</a>.
<h2 id="heres-what-well-be-creating">Here&rsquo;s what we&rsquo;ll be creating:</h2>
<img src="/assets/images/uploads/advanced-motion-preview.gif" alt="advanced-motion-preview.gif">
You can preview and interact with an example of the prototype <a href="https://app.atomic.io/d/oGfELiEBCNiK">here</a>.
Before you dive into building this prototype, I recommend interacting with the demo to familiarize yourself with the transitions. Notice how from Page 1 to Page 2 the moving elements are staggered? Those sequenced transitions are what we&rsquo;re going to explore with the <a href="http://help.atomic.io/hc/en-us/articles/208705508-Using-the-advanced-motion-timeline">Advanced Motion Timeline</a>.
<h2 id="lets-get-started">Let&rsquo;s get started</h2>
I&rsquo;ve created the basic assets for you in <a href="https://app.atomic.io/d/p8RSYJ8KBQxV">this sample file</a>. Just open the sample file here and click Copy &amp; Edit in the bottom right to make a copy into your own account to get started.
<h2 id="step-1-create-your-prototype">Step 1: Create your prototype</h2>
Before we add any interactions and transitions, we&rsquo;ll start by recreating the layout of the prototype using the assets from the sample file. From your Project, create a New Design (you might find it easiest to open the sample in one tab, and your new design in another).
Now copy and paste the relevant assets from the Assets page of the sample file and rearrange them to create your first page. Create your heading and subheading for Page 1 using the typeface Roboto and Hex Code #2962FF. Rearrange your elements on the page and you should end up with a page like this:
<img src="/assets/images/uploads/Screen%20Shot%202016-07-18%20at%205.45.05%20PM.png" alt="step 1">
To create the Page 2, from the Pages properties panel on the left of the editor select Page One and from the menu beside the page thumbnail, select &lsquo;Duplicate Page&rsquo; from the dropdown. Or you can copy &amp; paste the elements from Page 1 to a blank new page.
It&rsquo;s very important to create your subsequent pages this way (by duplicating or copying/pasting across). When Atomic detects that the same element exists across two pages, it will automatically animate any changes to the properties of that element (such as size, position, rotation, color, opacity etc). This is important when it comes to creating our animations.
Keep checking the sample file to compare what you&rsquo;re creating, especially the elements that are positioned outside of the main canvas. Repeat this until you have recreated all four pages.
<img src="/assets/images/uploads/Screen%20Shot%202016-07-18%20at%204.30.58%20PM.png" alt="page 2">
In the sample file, if you look at Page 1, you&rsquo;ll see that some of the elements from Page 2 (such as the photos and the hand) exist on Page 1, but are transparent &ndash; as they don&rsquo;t appear on Page 1. However we need them placed there to define their starting state. In the case of the hand for example, we want the hand to fade in from below, and slightly rotate. The same goes for the photos &ndash; you&rsquo;ll notice they&rsquo;re all placed behind the main-photo on Page 1 to define their starting position (check the Layers panel to see). It&rsquo;s important to note that you&rsquo;ll want to keep the order, naming and grouping of your layers consistent across pages to enable a smooth transition.
Check across all of your pages that you have the elements placed in their respective starting and end states. For example, Page 3 should look similar to the following:
<img src="/assets/images/uploads/Screen%20Shot%202016-07-18%20at%205.55.12%20PM.png" alt="page 3">
<h2 id="step-2-add-your-hotspots">Step 2: Add your hotspots</h2>
Hotspots let you define areas of interactivity. When interacted with, hotspots will trigger a transition to another page. To link your pages together, draw a hotspot (Cmd + H) over the areas you&rsquo;d like to make interactive, such as the dots at the bottom of the prototype, the skip button, and the top half of the prototype itself.
For this particular prototype, we want to use swipe transitions for the main hotspot. On Page 1, with your main hotspot selected, navigate to the Interactions panel in the right hand properties panel and set the following properties:
Gesture: Swipe Left
Swipe Distance: 200px
Go to: [choose the next page from the list]
Motion: None
Now if you click Preview in the bottom right of the editor (or CMD + Return), you&rsquo;ll be able to swipe through your prototype, navigating from page to page. Note: On your desktop, you&rsquo;ll need to click+ drag to simulate a swipe.
You can check this on your <a href="http://help.atomic.io/hc/en-us/articles/205451307-Previewing-on-a-mobile-device">mobile device too</a>.
(Optional) If you want to also be able to swipe back, on Pages 2 and 3 resize the swipe left hotspot to occupy just the right half of the page. Then, create another hotspot to occupy the left half of the page and set it to Swipe Right. Make sure you update the Go To pages to the correct destinations.
Clicking preview again will let you now swipe right and left (forward and back) throughout the prototype. Nice!
<h2 id="step-3-sequencing-the-transition-of-your-elements">Step 3: Sequencing the transition of your elements</h2>
On Page 1, with your hotspot selected and the interaction panel open, click &lsquo;Edit Motion&rsquo; from the Motion dropdown. This will open up the Advanced Motion Timeline where we can fine-tune and have greater control over the transition of each individual element.
<img src="/assets/images/uploads/Swipe-left.jpg" alt="hotspot setup">
For the transition from Page 1 to Page 2, the following finely-tuned transitions are what we&rsquo;re recreating:
<ul>
<li>The photos transition in a sequenced order</li>
<li>The dots underneath the photo move off to the left, in sequence</li>
<li>The hand appears towards the end of the transition</li>
</ul>
To do this, drag the respective bars related to each sequenced element in the motion timeline. For example, we want to stagger the photos 1 &ndash; 4 to transition in sequential order. You can see in the image below the elements for photo&rsquo;s 1 &#8211; 4 are sequenced by dragging the bars to the right in a staggered order.
In the timeline I can also alter the duration of each animating element. In this case, I&rsquo;ve dragged the right end of each bar out to give each photo a total duration of 300MS.
<img src="/assets/images/uploads/Screen%20Shot%202016-07-18%20at%206.18.08%20PM.png" alt="timeline">
Remember, at any time you can refer to the sample file that you copied to see how the elements are sequenced.
If you scrub the playhead through the transition in the timeline, you should see something like this happening:
<img src="/assets/images/uploads/transition-2.gif" alt="transition">
Now, you can preview your transition in Preview mode to see the transition happening in full screen.
For the remaining pages of your prototype, refer to the sample file to get a sense of how the elements are transitioning including the timing and order, or, experiment yourself.
<hr>
You made it! We&rsquo;d love to hear any feedback you have on this tutorial and requests for other tutorials that will help you master Atomic. Drop us a note on <a href="https://twitter.com/we_are_atomic">Twitter</a>, or in the Editor (just click the ? button in the bottom left and choose Give Feedback)
</div>

Tutorial: Using the Advanced Motion Timeline to create sequenced transitions

Top Stories