In a custom transition, Atomic works out what’s changed between two pages and builds a smooth transition between them. The main reasons to use custom transition are to animate small parts of a layout without the whole page transitioning, or to fine tune the timing and easing of separate elements.

Linked elements

The key to making custom transitions is understanding that elements from the start page need to also exist on the end page, so Atomic knows where they end up. When the same element exists on both pages, they are ‘linked’.

You can easily copy and paste elements from your start page onto your end page to make sure elements are linked. Alternatively, you can duplicate your start page as the starting point for the making your end page. 

Note: When an element from one page doesn’t exist on the other, it will be faded in or out during your transition.   

Tweening

Tweening is what happens during the transition between your start and end pages. Atomic identifies changes to the properties of linked elements, and automatically eases between the start and end states.

Most element properties can be tweened, including: size, position, opacity, radius, fill color, borders and shadows. 

Tip: try moving elements outside of the page canvas to see them enter and exit the visible area of the prototype. 

Making a basic custom transition

Create the two pages of your transition. Remember to use the second page to show how things look at the end of the transition.

On the start page, add a hotspot. With the new hotspot selected, select a gesture to trigger the animation, identify the go-to (end) page, and finally pick Custom transition from the Motion options.

Pick one of the easing options, like ease-in-out from the Easing list. Then enter preview to try it out. 

You’ll see that all the elements in your transition share the same easing type, and transition for the same duration.

Use Advanced Motion Timeline to fine-tune your custom transition

Using the Advanced Motion Timeline you can fine tune the delay, duration, and ease of individual elements in your custom-transitions.

Using the Advanced Motion Timeline

To access the timeline, ensure your transition type is set to Custom Transition in the motion dropdown, then click ‘Edit Timeline’. After making changes click the X to close the timeline. If you later need to access the timeline, select the hotspot and then select ‘Edit Timeline.

When the timeline is open, you’ll notice the pages panel changes to only show the two pages that represent the start and end pages of the transition. With the timeline open you can switch between them to make changes and edits as you refine the transition.

The timeline itself will only show linked elements that exist on both pages that have been changed in some way, such as size, radius, opacity or position. This keeps the timeline uncluttered. 

Adjusting element properties in the timeline

To adjust the delay on an element, drag to move the bar along the timeline.

To adjust duration on an element select the handle of the bar and drag to extend or reduce the duration.

To adjust the easing curve on an element select the easing icon just to the right of each layer name.

Edits to either page can only be made when the playhead is positioned at the start or end of the timeline, this is because the start and end of the timeline represents the first and second state of the transition.

To view all pages and layers again, close the animation timeline.

Preview directly in the editor

You can preview the transitions straight in the editor without having to open a Preview window. To do this, press the play button at the top-left of the timeline or simply scrub back and forth through the timeline using the playhead.

Animating groups

When adjusting the motion of a group in the timeline, those properties will be reflected on each element in the group.

You can also adjust the motion of each element in a group individually. Doing this means it will no longer be synced to changes made at the group level. Changing the element’s motion to be the same as the group will sync it back to the group.

Navigating the timeline horizontally

To navigate the animation timeline horizontally, you can use a trackpad or mouse/device that scrolls horizontally. Alternatively, you can use the built in scrollbars.

If the scrollbars are not appearing, try enabling them in your system preferences (Mac). To do this, go to System Preferences > General > and ensure 'Always' is checked next to 'Show scrollbars'.

Note: Advanced Motion Control will not appear in the drop down if you have 'previous page' or 'next page' selected in the Go To dropdown.

Want to get started? Copy this sample into your own account to see the timeline in action.

Next → Scrolling

Related articles:

Did this answer your question?