Fine-tuning animations with the Timeline Editor

Tutorial Breakdown

While choosing the Motion transition automatically creates complex and beautiful transitions, there are still a number of properties that we can customize to perfect our animation. Using the Timeline Editor, we can pinpoint the perfect timing and duration for each layer to create meaningful context through motion.

In this video we’ll edit a high fidelity animation by learning about:

  • The Timeline
  • Easing
  • Linking

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

Once you've added the motion transition to a layer, you can call it a day. But if you'd like to get in and get some more granular control over the speed and the timing of each and every object that's animating, you'll want to head over to the inspector, and you'll want to choose edit timeline. If you've added or removed any layers after creating the motion transition, you can head to the top of the screen and click auto link layers, and Studio will reapply that algorithm to match up any of the new layers to make sure that everything animates.

And on the left hand side we have the timeline itself. This is where all the magic happens. So I'm going to mouse over the very top of the timeline and this is where you can click and drag to zoom in or out. This isn't actually changing anything with our animation. It's simply changing our view of the duration of things, so that we can get more granular or that we can see more at the same time. So I just want to zoom out so that all of these bars fit on the screen. And you'll see that some of them are lighter gray and some of them are darker gray. The lighter gray ones are the ones that we can play with to change the interaction because these are the layers that have been matched from point A to point B. And the other layers have not. So those are just sort of going to fade in.

You can also look for these hollow dots versus the solid dots. The solid dots indicate that there is a match. The hollow dot indicates that there is no match. So you'll see image two here has a solid dot on the left because it matches layer two on the source, the first art board. But it's hollow on the right because it doesn't have an equivalent layer or a match on the second art board. So the ones that have a dot on both ends, those are the light ones. Those are the ones that are going to animate. And if I click and drag, we can actually see the animation taking place. And you can see that arrow left and arrow right for example, these are light ones because they're on both the source, just out of view, and the destination, just in view. And that transition is taking place and we can see that happening.

You can also click the play button at the top of the screen to play back your transition. There is a back arrow that goes to the source screen, the first screen. The start screen so to speak. And then an arrow to the right that goes to the destination screen or the end screen so to speak. So we can hop back and forth. We can actually select things directly on the canvas and see which layers they correspond with so that we can quickly jump over there, and start playing with the timing and the duration.

So let's do a few things here to make this thing perfect. We'll drag to the mile just to see what we're dealing with. And I think maybe these arrows should come in a little bit later. So I'm going to select the first arrow, and then I'm going to hold shift and select the second arrow. And I'm going to drag the middle of the bar to scoot the whole thing down. That's creating delay. The bar represents the duration, the duration's the same. Where the bar begins represents the delay. So the bar now begins a little bit later, which means the animation is going to start a little bit later. So there we go. The arrows aren't coming in until they're needed, meaning the image is in place. And I think that's looking a little bit better.

But everything's happening kind of fast, and it's kind of hard to tell what's going on. So, over here, we've got this 1X button where you can click to change the play back speed. And this is another one of those things that's not actually changing the prototype. It's just changing what we see here in the timeline editor. So I'm going to go to 0.2X. That's going to play back at 20%. And when I click play, look how slow and smooth that is. I can really get a detailed, granular sense of the timing of everything. So I can really now tell that the arrows are coming in a little bit later than they were. I also think that the background should fade in a little bit longer. Let's increase that time so that it's still coming in after the transition has ended, at least the bulk of the transition is already ended. So we'll click on the dot. See, instead of clicking on the middle, we're going to click on the dot and drag that dot to expand the duration of this. And we can zoom out a little bit more on the timeline here. So we can see a bit more. We'll drag that out.

And let's play this thing back again. So we've got the bulk of the transition happening, and there we go. The image lags a little bit and continues a little bit longer. The other thing we might want to do is the image sort of eases in at the very beginning. I want this background image to come flying in full speed and then slow down and taper at the end. So if you mouse over the name of a layer, you'll see this little icon here. And clicking it brings up the speed graph where you can edit the easing of how that layer comes in. Now this represents speed in the sense of coming in and then going out. And you can see here that it slowly ramps up in speed and then slowly ramps down in speed. So what I'm going to do is I'm going to speed it up. I don't want it to be so soft at the beginning, but I do want it to taper off and slow down at the end.

So let's take a look at what that might look like. We'll play that back. Ah, the image is showing up a lot earlier, but it's still slowly tapering out at the end. So we get the best of both worlds there. It's hard to tell at 0.2X because it slows down so much. So let's play it at 1X, and see exactly what we're dealing with. There we go. See, there's that last little bit at the end, that last little bit where it tapers off at the very end. And now that's looking pretty good. There's just one last thing you may have noticed. I'm going to switch from 1X back to 0.2X to play this back really slowly. And you'll see that the images below the main image fade in. They don't actually transition. That's because Studio doesn't know that those are the same image. They have different layer names. It just wasn't the original intent to have those transitions, so they're just fading.

But what Studio allows us to do since we can jump to the end point, and jump to the start point, we can select this image at the start point. Then we can jump to the end point, hold shift, and select the image on the end point. These are the same image. Let me go back and forth, just so you can see. We've got the iPhone with the spoon, and if we jump forward, again, we've got the iPhone with the spoon. And now by jumping forward and back, and using the shift key to select both instances of that image, we can head up to the top right where it used to say auto link layers, and now we can manually link those two layers together. And we can do the same for this image here, which matches this image here. I'm going to hold shift and click this one so they're both selected. And we'll link those together as well.

When we play that back, look at that. Those images now know exactly what to do. They're going from point A to point B. Studio's doing all the heavy lifting, and all we have to worry about is the timing, which is already looking pretty good. So let's head back. And then we'll click the play button to open up the preview window. And we'll click back and forth here. That's looking really good, really smooth. And I've already taken the liberty of doing the reverse of this transition from the big image back to the small. So we can click back and forth. How nice is that? Very fluid, very high fidelity, and it only took a few minutes.

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