Learn how to create and edit an advanced animation in UXPin.
- There are going to be times where the interactions, the motion interactions just don't cut it for you and you're going to want to do it yourself. Well, you can in UXPin. It's got a really interesting little feature in it that's going to help you sort of create custom animation rather than deal with whatever is given to you programatically. So let's take a look at how all that works. So I've got my slider up here, and what I want to do is, I want to attach an animation to this icon here, and I'm going to add a new interaction.
And what I'm going to do is, I'm going to come here to add advanced animation. And you'll notice that the screen changes. Right here, this is the animation. This is the start state. This could be Step 1, and I could add three, four steps, so if I wanted to go zooming all over the page and then wind up over here, I can do that. But what I'm going to do is, I'm just going to take this ball, and with the shift key held down, I'm just going to move it over, just like that. And I can now set the easing parts.
Let's use the elastic again, and we'll just keep the amplitude and springiness where it is. And you can also set the delay. Now, if you want this to take a little bit longer, you can change the timing here, so I'll change that to 400 milliseconds. It's not going to be all that noticeable, but you'll still see it. And you click save. Now, you'll notice that the interaction is attached to the button, so if I come to preview, the preview window opens. And if I click on the button, notice I've got that moving.
Okay, so I've decided now, that's way too fast. I want to slow it down. So I'm just going to close this preview window, come back, and I'm going to come to my advanced interaction, and I can edit these things right here. So I edit the animation and I'll select the ball. I want it to happen over, we'll say, three quarters of a second, so 750 milliseconds. Click save. There it is. Back up to preview.
And if I click it, it's a little bit slower. Okay, we'll close this. Now, the other things we can do, of course, is you can edit these things. As you saw, I could change the time, but if I come here and edit the animation, I can add a new step. So if I come to step two and I say, "Look, I want this to come down here." Click save. Preview.
And down it goes. So you can actually add all kinds of little extra animations to these things, and you can control them, and it's real simple to do. So we're just going to close the window here. All you have to do is just select your animation, open it up, and select edit animation. Now if you want to get rid of this one, what you do is, you come to your step, and you go "No, don't want that one." So we're going to get rid of it. Click the X and it's gone. And then the item that's in motion will be able to have easing applied to it, timing applied to it, and even a bit of a delay.
So there you go. Roll your own animations. It's really easy to do in UXPin, but it's called an advanced animation.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus