Navigation samples

Combining variables and interactive components lets you create a simple page navigation without too much overhead. Check out our page on 7 different types of navigation, and choose which one is right for your project.

Browse navigation samples
 

List with populated data from a spreadsheet

Uploading a Google Sheet into your Project lets you use data in your prototypes. In this prototype, data from a Google Sheet is being applied to various elements within a component. 

First, each element inside the component is linked to a column from the data source. Then, the data is applied to a parent element.

Interact with or download the sample file
Watch a tutorial on how to add data to your prototype
Watch a tutorial on how to assign data to a parent element
Learn about creating components

Simulating drag & drop behavior

In this transition a custom transition with a swipe interaction is used to simulate a drag and drop behavior.

Interact with or download the sample file
Read about custom transitions
 

Swipe to dismiss list item

This simple interaction uses a combination of and interactive hotspot, timed page actions and lastly the motion timeline to stagger the animation of the list items moving towards the top.

Interact with or download the sample file
Watch a video tutorial on using the Motion Timeline
Read about custom transitions
Watch a tutorial on how to set up page actions
 

Swipe to dismiss using components

In this prototype, each list item is an instance of the same component. Page actions and custom interactions are used to create a swipe gesture that dismisses the list item. 

The motion timeline is used to stagger the animation of the list items.

Interact with or download the sample file
Watch a video tutorial on using the Motion Timeline
Learn about interactive components
Read how to master custom transitions
Learn about page actions
 

Open modal with transition

A custom transition is used in this prototype that triggers the message modal to animate in when the user interacts with ask a question.

Interact with or download the sample file
Learn about using input fields
Read about custom transitions
 

Modal with dynamic content

In this prototype, several interactive components and actions are being used to add items to a cart or dismiss them.

Interact with or download the sample file
Watch a tutorial on creating a scroll container
Learn about timed page actions
Watch a tutorial on component interactions
 

Auto-advancing transition 

In this prototype the animating white dots are staggered via the motion timeline. A timed page action is used to auto advance to the last state.

Interact with or download the sample file
Watch a video tutorial on using the Motion Timeline
Watch a tutorial on how to set up page actions
 

Auto-advancing transition – Example 2

This simple card prototype demonstrates an animating heart. This is done using a basic custom transition and timed page actions.

Interact with or download the sample file
Watch a tutorial on how to set up page actions
Read about custom transitions
 

Maintaining scroll position during state changes in lists

In this prototype, an interactive component is wrapped inside a scroll container. Interacting with the component has no affect on the state of the scroll container, meaning the scroll position is maintained.

Interact with or download the sample file
Watch a tutorial on creating a scroll container
Learn about interactive components
 

Radio button slider

This radio slider uses custom transitions to make the white dot move across to each state of the slider.

Interact with or download the sample file
Watch a video tutorial on how to create an interactive prototype

Changing text with variables

Using a variable you can link an input field to text fields throughout your prototype. This means that the text (or emojis) someone types into the input field will be displayed elsewhere. 

In this prototype there's a variable called 'Sample Text'. Both the input field and the text fields on the page have had their content linked to this variable.

Interact with or download the sample file
Watch a tutorial video on input fields
 

Password lock with variables

This password lock uses a variable to let you specify a certain word to be typed into the input field. When the correct word is typed, the prototype proceeds to the following state.

Interact with or download the sample file
Learn about using input fields
Read how to create an interactive component
Learn about variables in Atomic

 Parallax effect

In this prototype you'll see an parallax effect is simulated to show elements moving at different speeds throughout the prototype. This is done by placing elements at further distances away so they take longer to travel at their end position.

Interact with or download the sample file
Watch a video tutorial on how to create an interactive prototype

Hover + Click

This prototype demonstrates how a hover + click interaction can work together.

Interact with or download the sample file
Watch a video tutorial on how to create an interactive prototype

Connecting variables to text and input elements

In this tutorial, whatever is typed into the input fields below is reflected in the text fields above in the credit card. This is done using variables. 

Interact with or download the sample file
Watch a video tutorial on how to create this sample

Variables Combo

This prototype demonstrates several of the capabilities and power that variables in Atomic provide you with.

Interact with or download the sample file
Watch a video tutorial about variables

Related articles:

UI Kits
Navigation samples

Did this answer your question?