It’s simple to create animated transitions between any two pages in your prototype. Atomic supports simple page transitions for when you need to move fast as well as powerful custom transitions for when you need full control over each separate element in your transition. 

Hotspots vs Actions

There are two ways to make one page transition to another, hotspots and actions. 

Hotspots

Hotspots are elements you draw over the top of your page to define an interactive area. If you want your transition to start as the direct result of user interaction, like a click, tap or swipe, you’ll want to use a hotspot. 

To add a hotspot, simply type H, or select the hotspot tool, then drag a box directly onto your page. With a hotspot selected, you can configure the transition properties over in the properties panel.

Actions

If you want your transition to start as the result of an event that isn’t direct user interaction, you’ll need to use an action. Actions can trigger transitions based on a timer, or in response to other parts of your prototype being interacted with. 

To learn more read our article all about how to create and manage actions.

Transition properties

To set up a transition, select your hotspot and look over at the properties panel. 

First, choose which page you’re transitioning to. Then choose a transition type from the Motion options. 

No Transition

Choose this option if you want the page to change instantly when an interaction occurs, without any animation or transition.

Page Transition

The easiest transitions to make are page transitions. You’ll see a list of options in the Motion dropdown like slide, fade and flip. Simply pick one from the list, and that’s it. 

Page transitions work by replacing the first page with the second page as a whole. Everything on the canvas moves as though it was flattened into a single image. 

This is perfect for when you don’t have time, or the need to transition individual elements within your layout separately. 

Custom Transition

Choose this option if you want to individually control how separate elements within your pages move and change during the transition, or if only some of your page elements should change during a transition. 

Here’s an article about how to make custom transitions 

Easing

Once you’ve picked your destination page and chosen a transition type, you might want to adjust the easing and duration. For swipe gestures, choose Linear, but for other interaction types, choose the easing type that suits. 

Here’s an article to help with understanding easing.


Next → Custom Transitions

Related articles:

Did this answer your question?