Advanced animation using motion

Tutorial Breakdown

 

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.

In this video we’ll get started with high fidelity animation by learning:

  • What is the motion transition?
  • Setting up artboards
  • Adding a motion transition

Studio project file

Download this free Studio project file to follow along—step by step—with the tutorial.

New to Studio?

Download the latest version of InVision Studio to get started

Download StudioDownload InVision Studio

Transcript

Now it's time to do some high fidelity prototyping, using the Motion transition.

This is where we're headed and I think you're going to be surprised just how quickly and easily we get there.

Now, before we add our Motion transition or play with the timeline, it's important to understand how this works.

It is, for the most part, completely automatic and what Studio's going to do is automatically match up the layers that are the same objects between the two screens and animate the differences in the properties between those two screens.

So, for instance, this image is small here. The same image is larger here. Studio is going to animate that difference; and the background here is white, the background here is black with an image. It's going to animate the difference.

So, what we're going to end up with is something much more high fidelity, without much effort at all. We just have to make sure that our point A and our point B are as we like and that our layers have matching names, so that we can help out the algorithm that does the matching.

So, one other thing that I want to do. I would like for these arrows to slide in, instead of just appearing arbitrarily. So, what I'm going to do is I'm going to select these. I'm going to hit copy, command C, on the keyboard. I'm going to head over to this artboard, hit paste and I'm going to position them by nudging. I'm going to use shift and the arrow keys to nudge these just out of view and then once I've done that, we now have objects that match between these two screens and it's going to animate the difference in position, thereby sliding those arrows in.

The last thing I want to do, just to be extra fancy, is this background image here. I would like for this background image to fade in and sort of grow. I think that's a cool effect. So, I'm going to select the background images I have and press command C for copy, head over to artboard one, press command V to paste and now I'm going to zoom out just a little bit and I'm going to resize the image; and the way Studio handles images is really cool.

If you click and drag the handles to scale an image out of proportion, it automatically scales the bounding box and then scales the image to fill that bounding box. It doesn't become distorted.

So, by shrinking it the way I did, in a seemingly arbitrary fashion, that is actually exactly what we want to do and then I'm going to send this layer to the back. I can just click and drag on the layers list to make it the bottom most layer and the last thing, I would like the opacity to be zero. So, it's going to go from 0% opacity on this artboard to, let's see, 20% opacity on this artboard and it's going to do so in a smooth and animated fashion, which is the best part.

So, now I think we're ready to apply our Motion transition. We've got all of our objects set up where we want them from point A to point B, so now we just have to make the magic happen.

So, I'm going to select our image on the left hand side, which is our trigger and if we head over to the inspector on the right hand side, you'll see that we've got an interaction already applied here. I'd like to remove that and start fresh with you guys, so you can see, one, how to remove an interaction and, two, we'll add another one together for practice.

So, we'll do a right click on this interaction. You'll find delete. We'll delete that interaction, gone; and again, to create an interaction that links from this selected object to the screen on the right, we'll press the letter C on the keyboard. We'll move over here and we'll click to create that interaction and now we'll switch the transition type from preset to motion; and that's it. The magic has already happened. Studio has already gone and matched up all the layers and created this wonderful animated transition.

I'm just going to make the transition a little bit longer, so it's easier to see it happen. We'll hit save and we'll head up to the play button on the toolbar at the top of the screen and click. There it is. It did it.

I'm going to hit the back arrow to go back and play it again and again and again. Just like that, we've got the arrow sliding in. We've got the image growing. We've got the background image coming in. It is a beautiful thing and it happened completely automatically. We just had a little bit of set up to do.

So now, we're ready to do some fine tuning and edit the details of this transition with the timeline.

Read More
Free. Forever.

Push your craft to new heights.

InVision Studio—designed with you in mind.

Make your next screen your best one yet.

Download studio free Download studio