Animating Sketch files in InVision Studio (2021)

Whether you're here having just completed my Sketch course, or you're working with your own existing design files, we're going to have to get your design work into Studio. Fortunately, we shouldn't have to rebuild anything — we can import Sketch files directly into InVision Studio to pick up right where we left off.

This is where the fun begins — linking screens together. In order for one screen to link to another, we need to create something called an interaction. Our interaction has settings that we'll look at over the coming videos. But first, let's look at how to create a new interaction in the first place.

We've chosen the object to trigger the interaction — but we still need to choose the gesture that will be used to trigger the interaction. There are a variety to choose from and some work differently than others. Let's compare them.

Preset transitions allow us to rapidly put together a prototype that tells the basic story of how the app is meant to work — but without putting in all the time and effort to create custom animations. Let's see what our options are for preset transitions.

Now that we've created an interaction with a transition, wouldn't it be nice to see it in action? Let's head to the preview window and see not only what we've built so far, but also a few trick to make it look even more presentable.

Once you've created an interaction, it exists to be edited at any point in time. Some folks just keep adding more and more interactions on top of one another because they don't see how to edit an existing one. It's not obvious, but it is easy once you know where to go.

When you’re ready to take the fidelity of your prototypes to the next level, the Motion transition allows complete control over the transition that takes place between each and every layer of your screens. When applying the Motion transition to an interaction, Studio automatically links up the matching layers between the source and destination screens and animates the differences. This allows us to worry about little more than just point A and point B.

Because Studio automatically links up the matching layers between the source and destination screens and animates the differences, there are some things that we need to be aware of to make sure this process is accurate. A messy file leads to messy animations.

Now that our layers are organized, let's look ate how to add the motion transition.

Let's revisit one of the interaction triggers that works in a special way with the motion transition. The swipe trigger controls animation in a very cool way.

The timer trigger is another special trigger that unlocks new possibilities when combined with the motion transition. Let's look at how the two come together to make more complex animations possible.

The timeline editor is where the timing of each element of our motion transitions can be customized. With some subtle tweaks, we can make our animations tell a much more powerful story that makes things much easier on the mind of the user. Let's start by taking a tour of the timeline interface.

The timeline editor is where the timing of each element of our motion transitions can be customized, so let's see what we can do!

Easing is how we create natural and kinetic motion that mimics the physics of real life. It's based on math, but using easing presets, no math is required.

When the easing presets just aren't doing it for you, you can take control with the graph editor and create your own custom easing curve. Let's nerd out on the details and the math behind what make the graph editor work.

Each animated layer can have one or several properties that change from the first artboard to the second artboard. Not only can we edit the timing of individual layers in the timeline editor — we can even edit the timing of each individual property of each layer.

Whether or not Studio automatically links matching layers together, we can use the Timeline Editor to manually link things. Let's look at the regular way and an even better way to grab layers visually and manually link them.

There are a number of ways for a sloppy or disorganized file to cause linking issues in the Motion timeline. Let's look at 4 common issues and one correct way to make sure we have our best practices straight.

It's important that we follow a few steps in the correct order to inform Studio as to what size device we are designing for so that our longer artboards can automatically be made scrollable in the preview window. Let's break down the steps.

It's very common for a prototype to have elements like navigation bars that shouldn't scroll with the rest of the content. Let's look at how to fix these items to the screen.

By fixing the position of an image within a scrolling mask, we can create a quick and easy parallax scrolling effect in just a few clicks.

Now we're ready to share our animated prototype on the web in all it's glory. Since we're already signed into an InVision account, we're ready to publish and share with a click to collect feedback, get approval, and even hand off assets to a developer.

You made it! You're a UI animating machine! Now get out there and make beautiful things move and moving things beautiful. A huge thank you for taking my course. It's been a pleasure being your teacher. —Joseph