The Easiest Way to Make UI Animations (Beginner Friendly) | Jitter Motion Design Course

Motion isn't just decoration. It's it

actually adds life to your designs. And

when used right, it can even add practicality, intention to your design, especially when it comes to product design and web design. However, it can also be very, very useful when you're presenting your work. That could be on a

portfolio or social media. And today,

I'll show you how we can use motion to present your UI design elements. And

that could be used for actual products.

It could be used for your social media.

It could be used for your portfolio. And

we're going to do this very, very easily on jitter.video, which is a free

on jitter.video, which is a free platform that you can use right now.

You'll learn the principles, the setup, how to make UI animations feel clean and intentional, and we're also going to learn how to loop it. So, let's dive right in.

[Music] All right. So, I have a couple of design

All right. So, I have a couple of design elements here that I've designed for a recent project. So, you can use them.

recent project. So, you can use them.

I'll I'll leave a link to it if you want to follow along, or you can use your own UI elements. So, first and foremost,

UI elements. So, first and foremost, we'll start by creating our animation frame. For me, I'm going for the

frame. For me, I'm going for the vertical format.

I'm going to go with 1080 by 1350.

This is going to be your animation frame. You can have it in whatever size

frame. You can have it in whatever size uh or background uh you want. I'll add

in uh one of my elements just so I can give this a background and see how dark I want um the background to be in terms of gray.

Um, I think I'm going to give it a little bit of a of a blue hue.

There we go. I think this should do.

What I'm going to do is I'm going to drag all of the all of these UI elements in here and I'm going to start centering all of them. I don't care if they're overlapping now. That doesn't matter as

overlapping now. That doesn't matter as long as they're centered within the frame. Next, I'm going to go ahead and

frame. Next, I'm going to go ahead and open the plugins, the Jitter plugin, and that's going to start copying the frame for me.

Um, and then it should open up inside of Jitter.

So, there we go. We now have everything transferred over to Jitter. I love this plug-in. I don't have to recreate

plug-in. I don't have to recreate everything from scratch. I'm going to start with the invoice and then I'm going to start with the other two UI elements. I'm going to hide them for

elements. I'm going to hide them for now.

And let's look at this. All right. So,

clicking shift and one so I can zoom to fit. Um,

fit. Um, I'll start by adding in uh slide in animation or maybe we can even better yet we can we can go with move and scale

in. Um, so that's going to be my animate

in. Um, so that's going to be my animate in for this specific card. I'm going to go left to right for everything. So,

there we go. And then obviously we can we can mess around with the duration here. can make it a bit faster. So I

here. can make it a bit faster. So I

think 0.75 should be good to go for this. So inside of my card I can have

this. So inside of my card I can have every element animated as well as the whole card is animating in. So I'm going to pick this right here for example.

Give it a scale in animation for this one. There's a whole bunch of presets

one. There's a whole bunch of presets that we can pick from. Um I do think for the QR code I can go ahead and give it a mask reveal uh without zooming in the

content should be fine. Um, I'm going to I'm going to talk more about the timeline in a bit, but basically I'm just going to give all of these elements

uh some animations from the presets.

Nothing too fancy. Presets should be enough. However, for text animations, I

enough. However, for text animations, I always like to go for the text animation itself with a text smoothing of none.

But for the effect parameters, I like to go with slow down. I feel like it gives it bit of a smoother movement. Um, I'm

going to, what's nice about Jizer as well is you can copy that specific animation for other elements. So, I'm

going to give that same animation um to the rest of my text elements.

So, let's take a quick look. That's

fine. Uh, although I like a bit of a stagger. So, I can start with

stagger. So, I can start with um this first element and then stagger in the rest of rest of the text elements.

Um, should be good to go. Next is maybe we could uh I kind of hate that it's if it doesn't feel centered. So, I'm just going to center this right now. Um,

these these misalignments sometimes happen when we're moving things from jitter into from figment to jitter. And

basically, I'm going to give this an animation as well of sliding in from let's do from the bottom up, right? And

we can give this an 0.6 second um animation. And we'll give that same slide in animation to all of these

elements. Now let's see let let's look

elements. Now let's see let let's look at this as at this timeline and see what things you know what's happening in here. So card moves in. As the card is

here. So card moves in. As the card is moving in, I'd like to actually start in all of my animations. Uh and then I'll start staggering them the way I see fit.

So there we go. Everything is happening all at once. Um, which is definitely better than the card animating in and then waiting to start all of these

animations. So we can actually start um

animations. So we can actually start um having these animations playing concurrently.

However, I think the logo and the QR code should start first and then we can have these text um

layers animating again in a staggering fashion.

But before that uh before the last bit um where the price is for the invoice, I'm going to start animating this element above it. So we can have the

animation actually uh staggering in a nice way. And then

finally the elements at the bottom the dates are animating last. I kind of want the

last animation to be uh to be on the on this element which is the main element.

So I'm just going to give it a bit more time. Let's see how that looks. I think

time. Let's see how that looks. I think

this is good. The QR code is taking a lot of time. So I'm going to decrease that.

And there we go. We have the last bit of animation happening where I want to direct the attention which is the number which is the main bit of the UI element.

You can you can use this technique or use any other technique the way that you see fit. Now it just gets easier from

see fit. Now it just gets easier from here because we are literally going to group this. We're going to say card one

group this. We're going to say card one animation and we're basically going to use the same sort of animation for the rest.

However, we need to animate this out before animating cartoon in. So for the invoice, I'm going to go ahead and give this an out animation. I'm going to

slide out uh this and give this an 0.3 because I want it to slide out pretty quickly. And for the slide by, I want it to be uh to to

animate to the right, not by 300 pixels.

That's a bit too much. Maybe we can go ahead and give this 70 pixels. This

should be enough. I'm going to add this into my group of animation. And that

should be it now.

Okay. So for this looping animation, I want the car to to to animate in, stay for like 2 seconds, and then animate out. So the total, so it's like 1.5 uh

out. So the total, so it's like 1.5 uh one or 1 second of animation in 2 seconds. So we're looking at the 3se

seconds. So we're looking at the 3se secondond mark where it should animate out. So I'm going to move this into the

out. So I'm going to move this into the 3 second mark and then this animates out. Let's see.

So it animates in, stays for a bit.

Maybe it's a bit too much, actually. So,

I think 2.4 should be enough. So,

animates in, stays for a bit, and then it right here. I think 2 seconds should be the sweet spot. So, animates in, stays for a bit, animates out. All

right.

Should be good to go. Now, what we can do is we can take copy some of these uh some of these design uh some of these animations for the rest of the cards.

So, we're going to go ahead for our project completion.

Um, we can actually start with the rec record.

Um, and I'm going to use the same animation in.

If I copy this animation for this card, what happens? All right. And then this

what happens? All right. And then this animation. I don't know what happened

animation. I don't know what happened there, but it started to work again. So

I literally just copy pasted that same uh animation I think.

So right here this is good. This

animates out and then we have the animation in for the second UI element.

Um similarly I'm going to maybe take in the grow in uh animation and have the avatar here grow in. Take take

the slide in animation for the text and copy paste it into here.

So paste into here. Paste this as well.

We can start layering this and staggering them. Right

as this is happening, we already went through this so we don't have to reexlain everything. And I think it's a

reexlain everything. And I think it's a bit smooth. just the way that we want

bit smooth. just the way that we want it. And then we can use the same slide

it. And then we can use the same slide in animation for these two buttons down here. Again, in a nice tagger fashion.

here. Again, in a nice tagger fashion.

We're going to do that.

And then there we go. This is done. So

you see how quick that was because we've already, you know, done everything for card one. So we can start copy pasting

card one. So we can start copy pasting this. Uh that's these same animations.

this. Uh that's these same animations.

So that's done. um we'll wait in for two seconds right so here we waited two seconds so when this started to start at 2.38 so around 4.4 four is when we

should animate out. Uh we'll take the same slide out animation and we'll give my uh record UI element,

the same slide out animation. There we

go. And then take again the slide in animation, the move and scale in animation and do the same thing for our last UI element. It's going to be a bit

interesting here, so stick around. So

there we have our our last card animating in have a bit of an overlap.

There we go. And then here what we can do is we can actually give this I like to use for percentages. Um the mask in

makes it feel a bit smoother.

Uh and then what we can do is we can give this a mask reveal animation but from as if like this bar is actually like growing

from left to right. And I'm not going to zoom the content but I'm going to have this animate as such. We're going to give this an 0.7 seconds. And then we're

going to do the same thing for this one.

We're going to have an overlap animation here.

Should be good.

Um, and then we're going to overlap these animations down here as well. So

everything we've just done, we're going to overlap them.

We don't want the animations to play one by one, but rather have an overlap and a nice stagger effect. So there we go. This is good. Take the same slide in

go. This is good. Take the same slide in animation for these buttons.

And we're going to give this slide in this slide in and all of the other

elements the same slide in.

And we're going to stagger them ever so slightly. And I think that's it. So,

slightly. And I think that's it. So,

let's rewatch.

First card animates in.

Second one animates in. Third one

animates in. And then we need to animate this out. I do think it's a bit too fast

this out. I do think it's a bit too fast though. So, we are going to

though. So, we are going to um we're going to move this just a tiny bit. We have this one,

bit. We have this one, this one, and then this one.

All right. For this,

I'm going to increase this duration just a bit and all of this as well. Just a

bit.

Right. So, it's a bit smoother.

And lastly, we're just going to slide this out.

So, we're going to slide out the last UI element right here. Maybe

right here. Maybe stays for a bit. And then right here, it should slide out.

There we go.

Actually, I need to copy that slide out animation, select the frame, the the project completion frame, and

then paste that here. And that's it. We

have now a very hopefully a very smooth looping animation. First card, we see

looping animation. First card, we see it. It's nice. Second card animates in.

it. It's nice. Second card animates in.

Third card animates in and out. back to

the first card. And that's it. So,

um, do you see how quick that was? In

literally less than 15 minutes, we were able to, you know, to animate all of our cards, add in very very like detailed animations. If you want access to this

animations. If you want access to this jitter file, I'm going to I'm going to leave a link for you to join my Discord channel, and you can do that by going on

to effect.design design and going into

to effect.design design and going into the academy the community bit and um you can claim free access to the

discord channel. It's it's free for a

discord channel. It's it's free for a limited time but you will have access to this specific jitter file that you can reuse um copy paste you know these

animations and use them the way that you want. along alongside other uh or

want. along alongside other uh or helpful hopefully helpful uh resources.

Um, and if this video is helpful, please leave a like, um, subscribe, leave a comment. What do you want to see the

comment. What do you want to see the next time? And, um, yeah, I'll see you

next time? And, um, yeah, I'll see you then.