Not too long ago I took it upon myself to recreate the SitePoint logo in Sketch App and then use it to create a loading screen animation for a hypothetical iOS app using Atomic.io. It involved making the two halves of the SitePoint logo fly in from the sides of the screen with an easing animation, and then transitioning the entire screen to the left, revealing the first app screen.
But now that Atomic.io is officially out of beta, we have access to new features that can create more complex animations by applying delays, timings and effects to individual layers.
What does that mean? Possibilities…lots of them.
Advanced Animation Control
Atomic calls this feature Advanced Motion Control, shortened to "Motion" in the user interface. Before (when Atomic was in beta), each layer had to have the same delay and easing effect, so what we wanted to achieve wasn't always possible.
'Delay' relates to the interval of time the screen waits before starting the animation, but while Atomic was in beta (which it isn't anymore), 'delay' was applied to all layers, as was the type of animation. Advanced Animation Control (I'll abbreviate this as AAC from now on) lets you specific different delays, durations and animation styles for different layers; which means more flexibility and better, more finely-tuned animations.
Lets create an example - signing up is free.
Setting Up the Pages, Artboards and Shapes
We won't need a huge artboard for this concept so start by selecting the Apple Watch 42mm 312 × 390 Preset. Press "R" and draw out a Rectangle that's 96x96px. You might find it easier to hold shift while you do this because that will force the selection to be completely square, or else you can use the form fields to declare the exact values. If you're a user of Sketch App by Bohemian Coding, this will feel very familiar.
Press command+d to Duplicate that rectangle, and then make sure that both of them have a gutter width of 6px. Repeat that step a few more times until you have a 3x3 grid, like so:
Creating a Hotspot to Be Interacted With
Press "H" and draw out a Hotspot with the same dimensions as one of our rectangles; the concept is exactly the same, only that this rectangle is invisible and marks the area of our interaction. Pick a square, any square, and move the hotspot region so that it appears directly above that square.
Like any design tool, there's a layer control interface where you can drag layers to appear below or above other layers (in Atomic this is on the left-hand side). Don't forget to make sure that the hotspot appears at the top of the layer tree - many a time have I stupidly wondered why my clicks weren't working!
Let's leave the animation alone for the time being, though. In the "Interaction" tab, there is a button that says "Duplicate This Page" - click that and then navigate to Page 2.
Creating the Next Stage of the Interaction
[author_more]
[/author_more]
Page 2 - this is the state where our interaction will end up.
Press "R" to create another rectangle and set the dimensions to cover the entire contents of the artboard; also, make sure that it appears at the top of the file tree. In the "Custom CSS" field, type "background: rgba(0,0,0,0.7)" and this will serve as a semi-opaque background to a modal, but make sure that you un-tick the "Fill" style otherwise it won't appear.
It's often advised to have the modal react to a click interaction to dismiss the modal, so move the hotspot that is already there to the top of the file tree and also make sure that it fills the entire artboard as well. Choose "Page 1" for the Go To option in the interaction tab.
Lastly, move your interactive square to the top of the file tree and use these values to create an expanded view of the square:
- X: 16px
- Y: 16px
- W: 280px
- H: 280px
- Radius: 5px
And once you add "box-shadow: 0 0 10px rgba(0,0,0,0.5 )" to the CSS box, you'll have a typical open/close modal.
If you click the "Preview" button you should be able to click on the hotspots to navigate back and forth between the two states.
Continue reading %How to Handle Complex Animations with Ease in Atomic.io%
by Daniel Schwarz via SitePoint
