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,…
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus
Skill Level Intermediate
1. The UXPin Interface
2. Build an iOS Project
3. Import Photoshop and Sketch Files
4. Adding Interactivity and Animation
5. Building Components
6. Sharing and Collaboration
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.