Up next in 10
How To Use Jitter For Beginners - Jitter Video Animation Tutorial
17K views
Mar 10, 2024
Embark on your journey into dynamic video animation with this beginner-friendly tutorial on how to use Jitter. In this step-by-step guide, explore essential techniques to bring your videos to life with captivating jitter effects. Whether you're a video content creator, animator, or someone venturing into the world of motion graphics, this video provides clear instructions on harnessing Jitter's capabilities for compelling and engaging video animations. Watch now and empower yourself with the knowledge to add an exciting dimension to your videos using Jitter, transforming your content into visually dynamic and attention-grabbing creations.
View Video Transcript
0:00
How to Use Jitter for Beginners, Jitter Video Animation Tutorial
0:05
Hey guys, welcome back. In this video, I'll be showing you guys how you can get started with animation on Jitter
0:12
So let's get into it. Now, Jitter is a online tool that enables you to get started with video editing with their vast
0:20
templates and their easy to use interface. It's a simple and clean tool and you don't have to let it hog up storage space in your
0:28
desktop or in your phones. Instead, you can use it directly in your browser for free. So let's get into
0:35
it. Now, to get started, simply head on over to jitter. Video. Then click on sign in on the top right
0:43
Once you click on sign in, you can create your account with your email address or with Google
0:49
So I am just going to create my account with Google over here, and I'm just logging into my account
0:55
If you don't have an account, you might have some onboarding questions like your name
1:00
email address, and a suitable password for your account. Now, once you have completed your account creation, you are going to click on Create New File
1:10
and you can start building your first video on Jitter. Now, if you're not comfortable starting from scratch and you would prefer to proceed with a template
1:20
you can click on templates on the top, and you will have a wide array of templates
1:25
that you can pick out from. So there are so many different types of animations
1:29
available on Jitter. So you have the Circle Cascades, small waves, the live template
1:35
the logo templates. And you will see on the left, you have a few different types
1:39
of video templates that you can pick out from. So you can choose
1:43
a template that you like, and you can just go on ahead and proceed with that and customize
1:47
it to make it your own. You have UI elements, website templates
1:51
icons, buttons, texts, backgrounds, show blasting, as well as social media-based templates as well
1:58
So let's say I want a background that is, you know, a bit dynamic for my videos so I can insert
2:04
one of these. You guys can see there are so many different types of elements available for this
2:09
So I have this gradient background and I want to use this and, you know, customize this a little
2:15
So I will click on the gradient background over here. Now, once I have the template opened up, I will click on
2:22
on duplicate to edit. And once this has been duplicated, you can get started with adding the original template So you guys will see on the back you have a gradient background Now the gradient background is composed of several different shades of colors And to be able to customize this you can see on the left you have the scene
2:41
The scene is basically your frame. They can increase or decrease the size of your frame
2:46
Let's say this is the size of my frame. Then I have the gradient background elements which have been added
2:51
You can click on design over here or click on animate and you can change the designs of the elements
2:57
as well. Now, once you click on animate, you will see on the bottom, the animation for this has been
3:03
added. So what the animation basically is, is that the element are moving side to side. Now, what I
3:10
want to do is I want to customize these elements, and you will see on the top, you have the
3:14
pathway of the element that has been added for each individual element. Now, I'm going to click on
3:21
the individual component. Then once I have the individual component, you will see the animation is added
3:27
as composed. Now if I want to change the direction, I can move the values like this. And on the right
3:35
in the animate section, the move will show me what is the new animation that I've added. So now you
3:41
guys will see, the purple is going to move in a different direction as well. So in this way, you can
3:47
customize each individual color. Let's have this color and I want to make it move from here to this
3:53
direction. Now I can click on add animation and I want another animation. We're going to rotate this
4:00
And then we have the initial value as well where we have the zero degrees to 45 degrees
4:06
Now on the left, you have all of these colors. And if you want to customize these, you can go into
4:11
the gradient background. And you will see you can click on replace media. And you can replace these
4:16
with your own images or your own gradients. Now, if you don't have gradients already, it's pretty
4:21
simple to create gradients you can even do it on figma and once you do that on figma you can
4:27
import them here and start building these types of dynamic backgrounds now this is just one example
4:33
let's create a new file and get started with our own animation so first off i have a blank canvas
4:40
and from the top left i have the option to add a star we have circles squares and text now i want to add
4:48
something that's fun. So first off I am going to go on the head and add a little square over here
4:55
And once we have this little square, I'm going to expand it over here like so
5:00
And I going to do Command C and Command B And I want to place all of these like this So I going to just resize them a little And once I resize it I going to do Command C and Command V and I want to place all of these like this So I going to just resize them a little And once I resize it I going to copy the new version
5:11
I want them to just fit the screen, but not be longer than the screen
5:16
Now I am going to place these, you know, at a distance
5:21
And you can select the items together as well. And once you do that, you will see on the right, you have the options to copy, paste, replicate, and more
5:30
And then you have the color. So I'm going to set one particular color. I'm gonna make it a really nice little pastel kind of pink
5:38
Now, once I have this pastel pink, I might want to increase the density of these
5:44
So I want them to be equidistant. And it will show you when these items are equidistant
5:48
You will see it says 46, 46, 46, 46. That means they are all equidistant
5:53
So after that, I'm going to place it once more like this
5:57
Make sure that all the elements are nice and, and distance. Now, once we have this, we are going to select all the elements together
6:06
and then on the right side, you have the animation. So you can go on ahead and click on new animation
6:11
and we can choose the type of animation we want. We might have a mask reveal that I might want to do
6:18
Now, once I have a mask reveal added for each individual rectangle on the bottom, I can choose a
6:24
different direction or a different timing for each one of these. So let's say that the first one
6:30
during the first one, then we have a random zigzag kind of pattern for these like this
6:37
and then after this, we have this one. Now, I'll show you guys what the animation will look like
6:42
So this is the current animation like this. Now, what happens if instead of the animation being towards the frame
6:52
you want the animation outside of the frame. So before that, you can just choose a different direction for the particular rectangles
7:00
You can click on new animation and add another color towards the size
7:04
You guys can see they have this. The tools are really based upon a pre-existing template
7:10
So they can detect, you know, the alternating animation you might want
7:15
So let's say I want to add what would look good with pink
7:18
I don't know, a really pale blue. Let's say I want to add a pale blue. It looks like I'm making cotton candy at this point
7:25
But I'm going to take this really nice blue over here. And now I have alternating color
7:30
You guys can see, I have my colors of pink up here. And then I have this blue up here Now I going to insert the blue over here like this And the I want this to be a slowed down or overshooted version
7:45
Now once we do that, let's take a look at the animation again
7:48
And this is a direct fill. If I don't want a direct fill, I can just leave it at that
7:53
So they color in and set off filling in. Now once I've done that, I can click on my text and let's say I have some text to import
8:02
then let's say I want to say welcome to Candy Crush it just looks really appropriate for Candy Crush
8:09
so welcome to Candy Crush I'll select this text and I have the design element on the right
8:14
I can click on the text I can change the style opacity stroke and shadows I have the letter
8:20
spacing casing the size and the font so I'm going to use a bold version and I'm going to change
8:28
the font to some other font I really like New Times Roman
8:32
So I'm maybe going to go with that, but that looks a bit too formal for this
8:37
So look, look, I can't find one that I like this one
8:42
So once we have our text over here, we can go on ahead, select the text and place it wherever we want
8:48
Once we have our text, we can click on animate on the right. And I want this to appear right after our sections are filled in
8:56
Click on new animation. And once I click on new animation, I can choose the type of animation I want
9:02
Now, if I don't want my scene this to be added in this particular scene, what you're going to do is you are actually going to add a new scene
9:10
So you can go on ahead and instead of, you know, adding it in the same scene, you can add a new scene to add the rest of your elements
9:18
So once you have completed the overall design, you can click on export on the top right and choose to export in 720P for the free version of using Jitter
9:27
However, if you do want 4K or 1080P conversions or exports, you do have to upgrade to the pro version
9:34
But let's just do a simple export of 480P. It's only going to take a couple of seconds for this to be exported
9:42
And once you have your export ready, you can get started with, you know, creating more animations
9:47
You can play around with the templates if you are uncertain. And plus, if you are, you know, looking to create these effects and these little, you know, animations for social media
9:57
icons, social media chats, all of those already exist in jitter, so you don't have to do them
10:02
from scratch. You can find all of that in jitter already. So I hope you guys enjoyed this
10:07
video if you did, make sure to leave a like and subscribe
#Animated Films
#Clip Art & Animated GIFs
#Flash-Based Entertainment
#Fun & Trivia
#Movies
#Multimedia Software
#Online Goodies
#Skins
# Themes & Wallpapers