If you’re looking to get started in Atomic we’ve got a great collection of basic transitions that you can use as building blocks to create more complex prototypes. From basic slide in’s to expanding panels and floating action buttons, these sample files are a great way to explore what’s possible in Atomic.
We recommend copying these files into your own account so you can see the mechanics behind how they were created, and learn how to make them yourself.
This is a quick and easy transition to create in Atomic. As the expanding panel is explored on both the first and second state of this transition, we’ve placed the it half on and off the first page.
Sliding screens in and out
Full-screen transitions are easy to create in Atomic just by moving elements between pages. In this example we’ve placed the second screen off the page and to the right. This is because we want it to slide in from the right, off the page.
Enlarging content to fill the screen is a common transition that’s quick to create in Atomic. This transition is crafted by changing the size and position properties of an individual element.
Card stacking Craft a card stacking transition by copying this design into your own account and exploring how the cards have been set up in the layers panel.
We’ve also recently released a tutorial on how to create a basic pop up transition in Atomic. Watch it here.