This tutorial walks through how to create a transition where the animation of elements is staggered.
Here is a sample that demonstrates it in action: https://app.atomic.io/d/oGfELiEBCNiK
Step 1: Copy the assets
We’ve created the basic assets for you in this sample file. Just open it click Copy & Edit in the bottom right to make a copy into your own account. Or, of course, you can use your own assets!
Step 2: Create your prototype
We’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:
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 ‘Duplicate Page’ from the dropdown. Or you can copy & paste the elements from Page 1 to a blank new page.
Tip: ensuring elements are connected. It’s very important to create your subsequent pages by duplicating or copying/pasting to a new page. When you do this, 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).
Keep checking the sample file to compare what you’re creating, especially the elements that are positioned outside of the main canvas. Repeat this until you have recreated all four pages.
On Page 1 of the sample file, you’ll see that some of the elements from Page 2 (such as the photos and the hand) exist on Page 1, but are transparent – as they don’t appear on Page 1.
We need them placed on Page 1 to define their starting state. For example, in the case of the hand, we want the hand to fade in from below, and slightly rotate. The same goes for the photos – you’ll notice they’re all placed behind the main-photo on Page 1 to define their starting position.
Tip: It’s important to note that you’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:
Step 3: Add actions to trigger the transition
Actions let you define areas of interactivity. When interacted with, they will trigger a transition to another page. To link your pages together, you can either:
- draw a hotspot (Cmd + H) over the areas you’d like to make interactive, or
- add an action directly to an element by selecting it
For example, we need to add actions to 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 on Page 1. On Page 1, add a hotspot for the swipe area, and with it 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 your destination page from the list]
Now if you click Preview in the bottom right of the editor (or CMD + Return), you’ll be able to swipe through your prototype, navigating from page to page.
Note: On your desktop, you’ll need to click + drag to simulate a swipe.
You can check this on your mobile device too.
(Optional) If you want to also be able to swipe back, on Pages 2 and 3 add another action to return to the previous page on a swipe right action.
Clicking preview again will let you now swipe right and left (forward and back) throughout the prototype. Nice!
Step 4: Sequencing the transition of your elements
On Page 1, with your hotspot selected and the interaction panel open, click ‘Edit Motion’ from the Motion dropdown. This will open up the Advanced Motion Timeline. Here we can fine-tune and have greater control over the transition of each individual element.
Read more about the Advanced Motion Timeline here: Mastering custom transitions
For the transition from Page 1 to Page 2, the following finely-tuned transitions are what we’re recreating:
- The photos transition in a sequenced order
- The dots underneath the photo move off to the left, in sequence
- The hand appears towards the end of the transition
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 – 4 to transition in sequential order. You can see in the image below the elements for photo’s 1 - 4 are sequenced by dragging the bars to the right in a staggered order.
In the timeline we can also alter the duration of each animating element. In this case, we’ve dragged the right end of each bar out to give each photo a total duration of 300MS.
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:
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.
Related: Mastering custom transitions