From the course: Principle for UX Design (2019)

Create your first animation - Principle Tutorial

From the course: Principle for UX Design (2019)

Start my 1-month free trial

Create your first animation

“

- [Instructor] Creating animations in Principle is a really interesting process. And that is what we're going to do in this exercise. Create animation. To get yourself started open the Animate file found in your chapter download. and the preview. Just minimize your preview and we can concentrate now So this one on the right is the End artboard. So how does all this get set up? Let's take a look. If I toggle down the Start artboard, And the reason is if I select the word garden, if you take a look up in the opacity property it's set to 0%. Now you not only animate between artboards, you also animate properties. So we've got the opacity of the text set to 0, and the icons, bookmark, group, chat and pin, If you want to see them, what you do is you click on this little eyeball right here for the flower, you can see that I've got them selected. And what I basically did was I center aligned them to the page by aligning their horizontal and vertical centers. Okay let's turn on the visibility of the flower. And get this thing to animate. Well let's assume it's a Tap. and you just point it to the artboard you want to go to, let go of the mouse and just like that you'll notice that there is an Animate symbol up here. And if I click on the timeline you see that I've got the timeline opened up. you see that I've got the timeline opened up. Now if I want to go back, what I do is I just click what I do is I just click on the little lightning bolt on the end, on the little lightning bolt on the end, select Tap and come back to the Start artboard. select Tap and come back to the Start artboard. And if I show the preview, we've got animation happening. we've got animation happening. Now one of the principles Now one of the principles of working with animation of course, of working with animation of course, is if you get somebody somewhere is if you get somebody somewhere you've got to take them back. And that is why I had this icon here, or the flower, or the flower, live. live. I want to click on it so I could go back to the start. Don't leave people hanging. Now the icons pop out and the text becomes visible Now the icons pop out and the text becomes visible because the change in the property for the text is opacity. because the change in the property for the text is opacity. So if I close this, you see Golden Lily is at 100% opacity. you see Golden Lily is at 100% opacity. So we had a property change from 0 to 100%. So we had a property change from 0 to 100%. And the icons are centered. This is their final position. This is their final position. So all I did was I just moved them to their final positions So all I did was I just moved them to their final positions on the artboard and then went to work. on the artboard and then went to work. And the best part about it is, And the best part about it is, Principle did the transitions for you. And we've got a nice little animation happening here, because those arrows point to the affected artboards. because those arrows point to the affected artboards. So there you have it. So there you have it. Those are the basics of animation. Those are the basics of animation. Changes happen between artboards, Changes happen between artboards, you got those little arrows pointing towards where they go, and as long as you've got that you're good to go for animation. you're good to go for animation.

Contents