Learn how to craft advanced animations with InVision Studio.
What you’ll learn
- States and timelines
- Easings and timed animations
Animations vs. Transitions
As we near the end of this InVision Studio series (minus all the bonus content of course), it’s only right that we have a little chat about the timeline animation features.
Animations differ from transitions — transitions help users animatedly flow from one screen to the next, whereas animations happen on the same screen. However, timeline animations still require two artboards, one that represents the before state (i.e. before interaction), and one that represents the after state (i.e. the result of the interaction).
During the course of the series we’ve been using three simple scenes, one of which has a trigger, and another of which has a modal that reveals itself upon the click of that trigger. In this InVision Studio animation tutorial we’ll animate this modal as the user activates and dismisses it, as opposed to simply linking the screens together as if the modal were an actual screen, which is how the user flow is implied in its current state.
As briefly described above, an animation requires both a before and after state, and there’s a fair bit to consider when creating these states. The way the mockup is designed right now is actually incorrect, because even though the modal doesn’t appear in the before state, its should still exist as an invisible element. Studio can’t determine how to transition the element into view if it doesn’t exist in the before state.
Preparing the “Before” State
So, before anything…
- Convert reusable objects into components to help maintain consistency
- If animating size, make sure that responsive resizing is set up correctly
- And most importantly, ensure that dynamic objects also exist in the before state
Only with the before state ready should we create the after state (for consistency).
What happens if there’s no consistency? 🤔
If twinned objects have different names, or if the object structure differs between states, Studio might find it a bit difficult to locate the object’s “other state” counterpart.
Creating the “After” State
With the dynamic objects inserted into the before state, duplicate (⌘D) the before state artboard (to ensure *complete* consistency), effectively creating the after state.
We should now have two identical states.
With the before and after state now in complete synchronicity, it’s time to make the necessary visual changes, which in our case, is changing the modal opacity from 100% to 0% (in the before state). If needed, lock newly-invisible layers with ⌘⇧L to make the invisible layers unclickable (and thus the layers underneath, once again clickable).
Now the modal exists in the before state, quiet and invisible, waiting to be animated in.
Now it’s time to animate the before state into the after state.
Back in the low-fidelity tutorial we learnt how to create screen transitions, which InVision Studio calls “connections” — repeat these steps by selecting the trigger (the interactive object), hitting C on the keyboard, then selecting the after state/artboard.
Instead of Preset, this time choose Motion.
You’ll notice two new settings:
- Duration: the overall duration of the animation
- Delay: the amount of delay before the animation starts (if any)
Congratulations, you created a simple animation! 🎉
Feel free to test it with Desktop Preview — ⌘P.
Editing the Timeline
Sometimes we might want to create sequenced animations; that is, where some objects have different durations or delays. In this scenario it’d be ideal if the modal background faded in first, and then the modal did a subtle but delightful swing motion.
Start by making the visual changes (Rotate in our case), then click “Edit Timeline”.
You’ll notice that, by default, each object has a “filled” timeline bar — this means that each object animates into its after state for the entire duration of the animation. To create a sequence of events, we’ll need to adjust these bars, allocating different amounts of time to each object, changing the delay/duration of objects individually.
If a bar is “greyed out”, it’s because Studio is unable to make the connection to its before/after counterpart. When this happens, simply ensure that the object in both states has the same name and click the Auto Link Layers button in the top-right corner.
After that, adjust the artboard’s timeline bar to increase the duration of all nested objects to ~0.6s (that’s ~0.3s for each animation sequence, assuming there are two sequences). Next, isolate the two sequences by reducing the timeline of certain objects to 0.3s, where the first sequence objects should start at 0s, and the second at 0.3s.
Now…the modal will only rotate once the background has faded in — the background takes 0.3s to fade in, and then the modal window rotates left for the remaining 0.3s.
Click the Play Animation icon to test the animation.
Click the Loop Animation icon to keep it rolling continuously, and use the dropdown to slow down the animation if needed — both are very useful for testing animations 👌.
Everything look ok? Awesome! 😃
Creating Extra Sequences
In the next step of this InVision Studio animation tutorial we’ll need to duplicate the after state, this time rotating the modal window to the right, but in order for the after state to transition into this sequential state automatically (i.e. without interaction), we’ll need to set up what’s called a timed trigger. Select the artboard, hit C, and this time change the Trigger to “Timer”. Set the Timeout to “0s” to make the sequence seamless.
Next, create one more sequence showing the modal window returned to its non-rotated state, and then open up Preview (⌘P) to test the overall interaction flow.
Perhaps you’ve noticed that the animation feels a tad…wooden? In order to add a little razzle dazzle, we’ll need to adjust the easing settings. Easings make animations feel more natural; after all, a ball doesn’t bounce at continuous speed (because physics).
All timeline objects have these easing options:
- Ease In: slow start
- Ease Out: slow finish
- Ease Both: slow start and finish
And there’s also Pop, Bounce, and Elastic, and finally Linear (which means no easing).
Have a mess around. We’ll retweet if you share with us!
Missed something? Get the ebook to read the entire series!
Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.