Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:42 minutes
Going beyond the basics with invision studio 400x277
  • Overview
  • Transcript

2.6 Animations

When creating an interaction, you can choose between two types of transitions: preset and motion. I showed you a preset transition in the previous lesson, so in this last lesson let’s take a look at motion (this is the more interesting of the two).

Related Links

2.6 Animations

When increasing an interaction in a studio prototype, you can choose between two types of transitions, a preset and motion. I showed you the preset in the previous lesson. Now, let's take a closer look at the motion. Ocean, because this is the more interesting of the two. So here, let's say that when I click on the song name it takes me to the player window, okay? So I'm gonna add an interaction, let's say tap. And instead of Preset, let's choose Motion. And I'm gonna change the duration to one second because I want you to see the changes a little bit better. So I'm gonna hit Save, and now let's actually make my track listing the Home artboard. Right-click, Set Artboard as Home. And by doing this I make sure that when I preview my prototype this is the artboard I always start with. So let us do that and let's see how motion works. So when I tap this that's the transition. So let's go back and do that once again. Pay attention to this element here. Notice that this actually got animated. It moved from this position to this position. The rest of them just kind of faded in, and this is what motion is doing. It's comparing my two screens And it's analyzing all of the elements. If it finds an element or the same element in both screens, it animates the differences. So in my case, I have this element which is called Music Playing, both here and here. The difference is in position. This is at the bottom. This is at kind of the middle. The rest of the elements are not the same on both screens. So studio just kind of fazed those in. And that is what motion is doing basically. And it's doing this automatically. All we have to do to create really nice animations is make sure that your elements exist in both art boards. So for example, let's say that I want this player to slide in from the top, okay? So I'm gonna copy it And I'm gonna paste it in my Track Listing cardboard. But I'm gonna move it outside of the view. So now, when I preview my prototype, Notice the animation. It might look a little bit choppy here because of my computer But it's there. Let's do that once again. There we go, now it's much smoother. Let's do the same for this bit. All right, so I'm gonna copy this and this and we're gonna paste them in my art board here. Let's group these up and actually place them in the track listing art board, like that. And let's also group these up here, and let's call them. Controls and I'm going to do the same here controls. Okay, so now its preview that is pretty, pretty cool. Now as I was saying studio does this automatically But if you want finer control over the animation you can use the timeline editor to edit that yourself. To do that, select your trigger, scroll down to the interaction tab and hit Edit Timeline. Now, this gives you a preview on the right side and controls on the left side. Let's zoom in here a little bit. This essentially changes the scale at which you see, The total duration, and you have controls here. You can preview your animation. You also can change the speed at which the animations played back. So let's go to 0.1x which is 10 percent of the speed And by doing that, you get a much slower representation of the animation, so you can really focus in on the details and fine-tune it. This right here represents the duration of the animation for each element, and you have all the elements right here All the layers. We have everything you need. So let say for example that I want this element, and by the way, you can select elements here and they were be highlighted on the left. Let's say I want this element to come in a little bit later.So what I can do is I can essentially shorten the animation By clicking and dragging on the ends or I can move it and create a delay for it, okay. So let's 00.5 seconds delay. And that will essentially make sure that Those controls let's actually bump up the speed here a little bit. We;ll make sure that those controls will come in a bit later. See so we now have the cover art. And the currently playing song coming in at the same time, but my controls are sliding in a little bit later. Also, you can change the easing for any element. So, if you hover on an element you can click This icon you can choose from a predefined Ease in, let's say for example elastic, and we can see a preview here. And that's gonna change the Ease in, just for that particular Elements. And once you are happy with the changes simply go back in your design screen again. And that how you can create animations with version studio. I hope this course gave you a more in depth look at what this app can do. It's still relatively new so it doesn't. Have all the bells and whistles of other apps in this field but it's very promising and it definitely does a lot of the things very well. I would like to thank you very much for watching this course and until next time take care.

Back to the top