Learn how to use the Interactions panel to animate between the states of an object.
- [Instructor] In the previous example, what we did with this heart was we set it up so if we rolled over it, it turned red, and when we rolled off it came back to black. These are multistate elements, and you notice that they have purple bounding boxes around there, so it tells you that it's pretty special. Now, the other thing you can do with these things is actually put them in motion, so what we're going to do is we're going to flip this heart. So what we're going to do here is we're going to just click on it to open it, and you can see that all of our stuff is there. But there's this thing called animation.
Now if I get the pop down here, we can flip it on the Y axis or we can flip it on the X axis. Let's flip it on the Y axis. And we'll give it an ease in and an ease out. It will happen over three tenths of a second. Click save, and let's preview. See? Is that neat or what? Let's go back to the editor, so we'll just click the edit document button, and if that isn't the animation you want, you can always select it again, just open up the interactions, and say, look, I didn't want flip Y, I wanted flip X.
Click save, back up to preview. So you've got these little interactive elements that are really kind of cool. And you can also put these things in motion. Let's go back to edit document. And let's change the motion again. So we'll just open up the interaction, and this time we're going to, we're going to slide it down. We'll just slide down, ease out, quadratic, that's fine.
Click save, preview. And you notice it slides down when you roll over. So you can actually use this one for things that change, and you can make them interactive and go to your roles and stuff like that. But there are simple, simple state changes that will allow you to do some pretty interesting stuff, just by adding a little bit of the animation to the interaction. And remember, when we come back here, the interaction is right here, and you've got the animations that you can use.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus