Transcripts
1. Intro: Hi, everyone. I'm Bold Bt, and welcome to Advanced UI Guide to creating UI animations. I hope that you are
going to learn a lot of new stuff in this course. And in this course, we are going to basically
look at multiple new aspects. This is the Advanced
Lotti files course, and it picks up right where the intermediate
course leaves off. Inside, you'll work
with complex plugins, learn how to troubleshoot the export and rendering
errors that actually break production files and animate
masks cleanly across scenes. And a bit of my
background is that I have created multiple
Lotti Animations project, and other than that, I have created 100
plus animations that are live on my Latifis profile
that you can check out. I'm also certified Latifitore animative
winner creator as well, as well as expert in Webflow, framer aftereffects, Figma, and also Latiflls
creator as well. So looking forward to creating something amazing together, and I'm going to show you
some really excellent work that I've done for
clients as well. This class is for
animators who already know Lotti files fundamentals
or have finished the intermediate
course and who want to move into client ready
production level work. So good luck to all of you,
and let's get started.
2. 01.Complex Plugins: Hey, welcome back. Okay, so welcome to the first
class of this course. Okay, so in this class, we will be looking at what are the plug ins that we are
going to use in this course. And just like previous course, these are just to
help you save time. You can complete
the entire course without buying any of these. Okay, so let's dive in now. Okay, so the first
plug in that we are going to be using is GifGun two. One is going to be AEUX. Okay. You have to click
this GitHub link, click on it or you
can just click on this one, download one. Okay. And from getting started, you can just watch this video
and learn what it does. Okay, but we will be learning
that in the future class. So let's just skip that. Um, you can just go
ahead and download it. Okay. And after that, the process to install
this is here, okay? This plugin is for two
software, basically, okay. And one of them is a sketch, and the other one
is after effects. And the third one is Figma. Okay. And we will be
making a link between Figma and after effects.
Why are we doing this? There are some issues
that you might run into while working in Illustrator or maybe you
cannot afford Illustrator, let's just say, and you only have access
to after effects, then you can just
use Figma instead. Okay, and also this
plugin is free. You must use this in
order to speed up your workflow and avoid some errors which
we will discuss. Okay, moving on, and
before I move on, please watch this tutorial, and you just have to please keep in mind that you
make sure that you install this plugin on both software in after
effects and in FICMa as well in order for it
to work perfectly because then it will create a bridge between two softwares, and then we will be
able to import files. Okay, moving on, after you have installed this
using this method, and then you can just go ahead and also buy this one as well. This is going to be ease copy, and this is going to
help you a lot, as well. This is a really cheap one, and it is going to save
you tons of time, and it's not just good
for lot animations. It will help you in
any and every project of after effects. I
guarantee you that. Okay. And another plug in that we will be using is going to
be a plugin inside Figma, which is get waves. If you want to check this out, you just have to type
in wave in the plug in section and you will
get it the get waves. Okay. And you can just use this to create
wave animations. And how do we get into
the detail of that? We will get into
the detail of that really soon in the
upcoming class as well. Okay, so we will be
using this plugin. So just go ahead and
download these plugin in your PC and we will be good
to go. Thank you so much.
3. 02.Troubleshooting Errors: Okay, so we are back again. And let's get into
the after effects, and let's just start working. Okay. So in this class, what we will be discussing
is the fundamental problems, which was the plug in overload. Okay? And it was a pay plug
in, as you might know. So it was $55, right. And it can cause
sometimes some issues. Let's just go ahead
and let me show you what type of issues
it can cause. Okay, so we are
inside after effects. Now, let's just go ahead
and check our design. Okay. And let's just open
it inside Illustrator. Okay. So this is an SVG file that was provided
to me by client, okay? And they needed this animated. Now, let's just go
ahead and select this and take this into
after effects, but let's just check
the size 1920 by 1920. Let's just make a new
comp and make it 1920. Okay? And let's just take these layers into after effects. Okay. So if you notice there
is a bit of a problem, okay? As you can see,
the layer gradient does not match the
gradient here, right? The gradient is below here, and this gradient
is also not right. This one has the green hair, but actually it has it here. So the famous UTuber Austin
Bowens from Ray V Studio actually fix this issue by you just have to edit the gradient inside
after effects, and that will fix the issue. Obviously, we can
do that. But what if it was a client's logo, right, and you were
supposed to deliver a perfect at animation
of their logo? What if you edit their gradient in a wrong way and if there was just a slightly bad
version that you created of their logo by just
messing their gradient up. So this is not really
advisable, right? So we shouldn't be
messing up with the clients color themes
and gradients, right? So in that case, what we
should be doing is we should be finding a way to animate these
exactly how they are. Another way that might come
into your head is that maybe we can use the
illustrator file instead. Let's just go ahead
and hit save as. Let's just come
back here and copy this path and let's just go
ahead and paste it here, and we will call this
we'll convert this into a AI illustrator file,
and let's just hit save. Okay. Let's just hit. Okay. And now let's just
go ahead and try to bring this animation back into the
file. Just give me a minute. I think it is not saved
at the right location. Um, yes, there was a mistake. Okay, we'll make it logo, ring. Okay. Okay, so the
file is saved. Now let's just close this
and minimize this as well. Let's just use this instead. Let's just go ahead in after
effects and try to use this. If we use layer system
or footage layer, that doesn't matter, actually, because when we drag it
here, as you can see, we need it to be converted into shape layer in order
for it to work into. Um, in order for it to
work into Lottie file. But whenever you
convert the layers, it will make this gray because gradients
cannot be converted by using Adobe After Effects layers and by converting them into
A After effect layers. It will not create the gradient. It only applies the
field color. That's it. Flat field colors only apply. It does not apply the gradient. So what do we do now? Well, there is a solution, luckily, and we are going
to figure this out now. Okay, let's just go ahead
and open Figma, okay? And what we are going to do
now is that we are going to drag this SVG here. And if your design is
not already in SVG, what you can do is just open your AI file provided by your
client and just save it, save as, and just just convert it into an SVG
and just sit safe. That's it. And I just keep it 1.1 version and it
works perfectly. But if in some cases it
does not work perfectly, then you can obviously adjust these settings and try to
figure it out as well. Okay. So now we have the SVG. So let's just take
it into the Figma, right? It is here. And as you can see,
the gradients are exactly the same as
they should be, right. So I'm just going to scale
it down a little bit. After that, I'm
just going to right click and I'm just going
to go into the plugins and then go into the
development section and then hit AEUXPlugin
plugins, okay? And this will pop up. Okay. And then I'm just going
to select these layers. It is important that the
layers are inside a frame. If there is no frame,
then please create one and then just
click on this button. Okay, it says three
layers and two. Okay, so let's just
go now into AE. Okay. So as you can see, now the gradients are perfect and some things to keep in mind, which are really
important because it might mess with your mind. There will be some extra
layers also imported when you import any
assets from FIGMA. Now, why does this happen? I don't really know, actually, but I do really know that
these are guide layers, so you just have to select
them and just delete them, and it will not do anything, any harm to your file. Okay. And then there is
this empty layer as well. You can delete this one as well. So there are just two
layers now, okay? And now our gradient is perfect. Now this is really amazing. And now, it's
really amazing that this free plugin works better than a paid plugin which is $55. But obviously, there
are advantages to using overload because it
offers so much more, actually, and you can work back and forth in After
Effects and Illustrator. And also, is much more important to know that Lister
is a designing software, not a UI design
software, actually. So it offers so many more tools, and you can design much more freedomly inside
Lister, actually. But at the end, if you
cannot afford this, then you can just convert
your assets in the end into SVG and then just take them into Pigma and then just convert them into
Ailiers like this. Okay, so you have to keep this in mind that
there will be some glars. Another thing which is really important that you have
to keep in mind is the size of the frame is actually going to become
the size of the com. And also, when a client
sends you a design, and if there are too many
frames inside a design, what actually After effects
is going to do is that it will convert every
frame into a pre comp. As you said there were
more frames, right. There was another frame here. Let's just try this, maybe it will work or
maybe it will not. So let me just go
ahead and try this. I just click the
Santo selection. Then as you can see,
it created this frame, and then there is this frame. And then as you can see, I
created another frame, right? There is this frame as well. Okay? So the layers
are inside this. So the number of frames
that are in design, it will be creating frames and frames and frames
inside after effect. Now, it might get a
lot messy when you are working on a UI design of AP maybe because there will
be so many frames, right. So what you are going to do in those situations is that you're going to just
select the frames, and then you are
just going to react the items out of
those frames, okay? And then you can just
delete the layers. And if the designer actually
used autoayout, right? And so when you remove the
elements from the frame, they will be moving
here and there. So then you have to just turn off the auto layout, actually. Or another thing that
you can do is that you can just take all of
these assets Okay, into after effects,
let's just say, let's just write one more time. Let's just select it
and do it once more. Okay? The layers are sent now. Okay. Now what you can do is you can just open
the comp, Okay. Okay, so the layers are not
inside frame, as you can see. So they were not exported. Let's just do it one more time. Let's just delete
all of these first. Okay. And let's just do with a fresh start.
Let's click here. Okay, four layers
are sent here, okay. There's a frame comp, and then inside there
is a frame comp, and then there is
inside layers, right? So what you can do is
that you can just go ahead and delete
the guide layers, and then you can use
this comp, actually, Control C, and then just close all of these and
then just create a new comp and then
just paste it there. Okay? And it will
work perfectly. You can use this method to avoid the extra frames and
extra layers and ATC. Okay. So we have got the grasp
of this plug in, actually. So what it does actually, right? So let's just move on
to the next plug in, which is this one,
the ease copy, right. And what this plugin
does is that, let's go ahead and I'm going
to open the animation now. Okay, well, just hit Don't Save. Okay, so what we are going to
do now is I'm going to show you a bunch of examples
of projects, actually. Okay. So let's just
have a look at these. Okay, so these are quite a few animations
that I did for our client. Okay. And as you can see, there are multiple
animations, okay, right? And we have animated the
parts inside here actually. Okay, as you can
see, the teeth are not looking good and then
they are getting fixed. If we solo the layer, you can see it better. Let's just solo see, right? And then the cover
gets on top of them and the effect
completes, actually. Like this jaw overlap is
covering and fixing this. Okay. And let's just move
ahead, as you can see. Okay, so let's just assume that I sent one
animation to the client, and he loved everything
about it, right? And client wants me to use
exactly the same easing, the same type of feeling across all these icons, right, right? So what am I gonna
do about right. We have to keep something
in mind about that, that we match the easing, right? So what we can do
is let's just say that this was the icon
that I did for the client. Um, okay? This was the icon that
I did for the client. And this moment is perfect. He says that he loves it, right? So I want to match the easing. Let's just assume that this
is a custom easing like this. Okay. I want to animate all the other ones
and copy the easing of this. Okay? Not the position
values, but only the easing. So how do we do
that? We cannot do that with the native
features in after effects. So we use plugins for
things like this. So what we are
going to do is now, click on the copy button, and then there are two options on the paste panel, actually. Okay, what we're going to
do is we're going to hit this one and then I'm going
to follow this layer. Then as you can see, I
have already used this, I think, I'm going to select these two, and
I'm going to hit Es. Okay? So this project is
actually three years. I did this project
three years ago, so maybe I wasn't using
bad plugins back then. So yeah, now it is really good to check back my work and see how much improvement
I have made. And as you can see, now
this will look better and consistent across all the
icons on their website, right? So the client will be
more happy most likely. Okay, so we can adjust this
easing as well, right? And just play this one back. C, right? So this plugins is really
helpful in those terms. And the other thing
that you can do is that you can also value
the copies as well. Let's just say that we wanted
another layer behind it. Let's just duplicate this one. Okay. And there were no
keyframes on this one. And this was another layer, and it had some problems in
it, let's just say, okay? So it had cavity inside it. Okay, let's just reduce
the scale as well, just make it around
here, maybe. Okay. And just adjust the path as
well because it's a cavity. So let's just ruin the path. Okay. My bad. I just fix it now. Okay, right? So
there are two ways, actually we can
parent the layer as well as we have learned
in the previous course. But let's just say due
to some reason or maybe maybe I want to add some offset actually
on the animation. That's why I don't want the
layer to be parented as well. So what I am thinking is that maybe there
should be some offset right. So you can just
select this layer. Copy. It has actually copied the easing
and the value both, but it will paste what
we tell it to paste. Okay? So what I'm going to
do now is I'm going to hit P on my keyboard
and hit keyframe and just just click value. Okay? Now, it says, if you're copying and
pasting multiple ess, you must select the
same number of number or multiple number of
frames to be copied. Okay. So I'm just going to
create two keyframes. Okay. And let's just select this one, hit Copy, select these ones, and I'm going to hit value. See, I copied the
value now, okay? The aging has not been copied. Now I'll just hit Es as well. So now the aging has
also been applied. Okay. So now I want to add
some let's just say offset. So we'll just do that now. Okay. Okay, so it's working
perfectly, right? So this is the main
usage of the plugin. And now this is really a
very simple use guess. But as you know, in the previous course, we did a whole character
animation scene right. In those situations
where there are more than 150 layers
which we animated, we can just animate one layer
and perfect its easing and then just copy that
easing and placed it everywhere else, right? We just don't have to go
through all the 150 layer ends and then select them
and then ease them manually. Then maybe some layers get unselected or deselected
while we do the process. So what we can do is just
apply easing on one layer and then copy it and then just select all of them and
then just hit Ease. So this is the main
usage of this plugin. Okay. So now what we're going to do is
we're going to look at another animation example and we are going to be
using another plugin. So let's go ahead
and do that now. We'll just close this project, and I'm just going to
create a new comp. Okay. And then I'm just going
to make it 1080 by 1080. Okay, it's just name it to bebe. And now I'm going to go
ahead and create an ellipse. It's going to make
it a circle now. Okay. I'm just going to
make it a blue color. I like this one, right? Um, more like a purple one. Okay. We did it, and now I'm just going
to make the stroke zero. And I just go ahead. Now, let's just say that there was an arrow
inside this, okay. And I wanted this
to be animated. Right? Let's just go ahead and create an arrow real quickly. Okay. I'm just going to
go ahead and make this. Okay. Now, what I'm going
to do is do the path, and then I'm just gonna make it round, actually, like this. Okay. Then I'm just gonna
duplicate this one. I'll just rotate
this 190 degrees. Okay. Then I'm just gonna
open the path of this one. I'm just going to hit G.
Let's just make it center. First of all, that
will work better. Okay, like this. I'm
going to hit the bath, it's going to hit
C and my keyboard, it's gonna hit
anchor point here. Okay. So our button
is now created. Okay. So now what
I'm going to do is I want this wave animation. I want the button to
emphasize that there has been a lot loading or
downloading going on actually. So a wave animation should
go inside this, okay? So before I do that, this is not going to make any
contrast, actually, right? So I want there to be a stroke on the button
actually, as well. So make it 20. And let's just make it a lighter color
as well. Like this. Okay. And then I'm just
going to go ahead and make this one longer
like this, right? And then we have to create
the inner animation, right? Like, we want this
circle to be animated. Okay, we're going
to just turn off our feel actually
on the above layer. What you can do is click
this button right here, and then it will just fade. I'll just shuffle
between the options, and now we are empty. Okay. Now we are
empty in the field. Okay. So now I'm just going to make it off, turn off, right? And as you can see,
it only has a stroke, so I'm just going to lock it and just going to lock
these ones as well. Now we have to create
a wave animation. Now what we can do
is we cannot use wave warp effect actually because inside Late
does not work, right? So we will have to use something else because we cannot
use this method. There is another
advanced technique that I would like to highlight, we can use, but it is
not advisable, actually. What we can do is
actually let's just make it a precom first of all,
so I can explain to you. Let's just control Z this one. No. Okay, let's just go
ahead and precom this one. Wave circle, let's just call it. Okay, and it's going to go
ahead and make it auto trace. Let's go into layer. I'm
going to hit Auto trace. Okay, I'm just going
to make it Alpha, and you can adjust
the settings as well, this is just to tell
you what it can do. Okay, I'm just going to make it 1 second before I start it. So my software does not have
to go through the misery of going to animate and
redress this 1/32. I'm just going to
make it apply, okay? Now, as you can see, there are multiple points on the path, right, and it is animated. Now what I can do is go ahead
and create a rectangle, actually, and I'm
just going to make it a feel it's gonna
drop the stroke. And I'm just going to
copy the mask from here. Okay, and I'm just going
to paste it over here. I'm just going to
go into the mask. Let's just turn this off, and I'm going to make it add, right? Is and I'm just going to
go into the rectangle, actually, rectangle path,
and it's gonna drag it down. Okay. So now let's
just play and see. See? The animation is Lottie compatible now because
Lottie supports masks, but, but, but, but, but
there is a problem. Let's just refresh this list. Okay? It is not pking
due to some reason. Okay, so okay, I'm just going to go ahead
and save the path, actually. We'll just call
it way animation. Maybe that will
make the file work. Okay. Well, actually, this is also a pro tip that if
your file is not saved, then this also happens
sometimes actually, that the pudimn
plugin does not work. Okay, so you have to make
sure that your file is saved. Also, it also sometimes messes up the rendering
files as well. So it is better to save
the file actually. Okay. So now I'm just
going to go ahead, select it, and then
just going to go here. Then I'm going to just copy
the path and paste it here. And I'm just going
to call it V test. I'm just going to hit render. Okay, so it is rendered, and now I'm just going to go ahead and check the Path file. As you can see, it is 2.2 KB actually at the
moment, right? And let's just go ahead into
our after effects layer, and let's just go
ahead and preview it. Okay. Okay, so there has
been a mistake, actually. I rendered the
wrong one actually. Go back and render
the right comp. I just make it way we test. I'm just going to go
ahead and replace it. Okay, so it's done. Let's just check
the file size now. It is 82 KB, right? Okay, now I just go back into our after effects and let's just preview
the animation here. Okay. Okay. As you can see, the animation is perfect, right? And the file size is
82 KB at the moment. And it is only 1
second long actually. And I have actually tested this method with the multiple layers
and multiple projects, but it is not ideal
because it might work in an ideal situation
like this where you have to animate the
animation for 1 second only. Now, obviously you can
make clones of these ones, but individual keyframe
actually create more data. So I don't really recommend
this method actually. But obviously, if there
is no other choice, then you can definitely try
it if your client is not satisfied with the method
that we are going to try now. So let's go ahead and do the other method,
actually, okay? So I'm just going to go ahead and duplicate
this one again. I'm just going to
unlock the upper one. I'm just going to
make the stroke zero and make it a fail. And I'm just going to select it. I'm just going to select
it and copy the color. Let's just save the file
as well along the working. And let's just delete this file. Okay. And now I'm just
going to go ahead and open the plug in actually and hit the
getaways plugins. Now, I'm just going
to create a new wave. Okay. You can add
variation into the wave. You can make it like this. You can also create buildings
like this, by the way. And you can also make
spikes like this as well. You can also use this
randomized button actually to randomize
the pattern as well, but I'm just going to
stick to the wave. And also, this one
actually controls the wavelengths in the design, and this button actually
tells you where it will draw the wave on the upper part or on the bellow
part of the layer. This plugins is
really helpful in creating WV imions actually. Even inside prototyping as well, this will really help you do the prototyping really easily. I think this one
feels really nice. I can also hit the randomizer, but I think this one looks nice. I'm is going to change
the color as well now. So this looks perfect to me. Now what I can do is, I'm just going to select this layer. I'm going to go into the
plug in development. Hit AEX and take this
layer into after effects. Now, it says layer must
be inside of a frame. Now because this layer
is outside the frame, let's just go ahead
and slack the frame, drag the layer into the frame. Now, click on it, and
let's take it into the. Okay, as you can see it,
ddt the frame as well. So let's just leave
the frame, copy this, take it back in our main
count, and here it is. Now it is up to you that how you choose
to work with this. It is completely your
creative freedom choice. Now, I'm just making this
wave small, actually, okay? And I'm just going
to animate this now. Okay, so let's just go
ahead and animate this. First of all, what I'm going
to do is select the is path. I'm just going to make it
convert to Bezier path. Okay, I'm just going
to click Path, create a key frame, and it's going to select my
WV path now and it's going to hit Pentool and select
this tool right here, which makes mask on
the shape layers. Select it, add a point, control V to paste it. And now I'm just
going to go ahead and select it and just
bring it over here. Okay. Now I'm going to just edit it until it fits
perfectly my needs. Okay, so now I'm going to do I'm just going to hit Add on a mask, Okay I'm just going to
turn off this layer. Now we're going to animate this. And how are we going
to animate this? Now? Well, there are different ways, but let's just try this one. I'm just going to give
frame the position, and I'm just going to go ahead. 12 frames. I'm going to
bring the wave up like this. Okay. I'm just going to go
back into the path and make this bottom part actually longer because then
it will work better. Let's just select this and drag it down like
this. Okay, perfect. Now, what's actually happening is we're gonna fix
it real quickly, and it's gonna hit
you on my keyboard. I'm just gonna create
another keyframe on my mask and then just select
it and then drag it down. Simply. That's it. That's
what I have to do. Let's just go ahead and
play the animation. As you can see, it is quite
flat, actually, right? So I just bring it
way back down and it's going to make
my mask stand here. Okay. And now I'm just gonna
my layer is below, right? So I'm just going to make
it move this way. Okay. And now I'm just gonna
drag my mask like this. Okay. Okay. So
let's try this now. You see, obviously, the animation is very
short, actually. So that is why it
does not look good. But let's just try this
on a longer length. Hey. Okay, so this looks better, right? This looks better. Okay, so there's no
animation til yet. Let's just create keyframes
key frame on the position here and make it drag all
the way back like this. Okay, so there is a
mistake now, right? We're going to have to
fix the mask, actually. Let's just check now. Okay,
so it's working, right. But there is a bit of an issue, which is that it should be, I think, around here, right? So the wave should be like
moving really very fast. Okay, so I'm just going
to drag this over here. It's just dry now. Okay, see, perfect. Now, what we can do is we can create multiple
layers of this as well and create another
speed variation as well. We can adjust easing
as well, right? We can work our way throughout
this as we like, right? This is to our creative
freedom choice is actually how we
use this approach, and let's just try to
do something with it. Okay, as you can see, there is a bit of a variation
in the wave, right? So it makes it look like liquid, actually. You see, right? So it is all about working
around this and creating wave animation becomes
really easy and simple. You can obviously use
the wave war effect and also create wave animations
using that as well. But I don't really
recommend that, because I think this
approach is really better, and you can edit the layer more easily,
actually, because Um, let's just say that you
have to edit the wave, you just have to go ahead and make some adjustments
in the path right. But if you were using waver, then you'll have to go ahead and make the adjustment
in the effect, then retrace it,
auto trace it again, and then apply it back
to the shape again. So I think this
method works better, and also it causes the file size to be
less as well, actually. So let's just check our
latifle size actually. Um, I'm just going
to try this one. By the way, this also
has two layers now, so maybe the file
size will be more, but let's just check now. Let's hit done. So let's just go ahead and check our exported file
to see its size. Okay, so as you can see, the file size is
nine KBs now, right? So you can see the huge
difference between the files. It's really huge. It's
really huge, right? So as you can see, the file size will be really, really, really small if
we use this approach. It is increasing the
file size by ten times. It was around 90 when we
were using Wave Work, and now it is only nine. So this is a huge
difference, right? So these are the main
reasons why these plugins will help you make
creative animations better and make your animation more optimized and stand
you out from the crowd. Okay, so that's it
for this class. I'll catch you in the next one.
4. 03.Lottie as Service: Hello, everyone,
and welcome back. Before we continue
to the next lesson, there is something that
I wanted to highlight, actually, which was left
out in the previous class, which is this last plug in, which is GifGun too. So this is basically
just to help you create quick gif or gift animations so that you can send them
to the client, actually. There's not really huge
advantages to this plug in, except what it does is if you are creating
gift animations, particularly for
clients, then this is going to save
you a lot of time, and it creates very optimized
file sizes as well. And there are very few
settings in the plugin, actually, and you can go
through them as well. It can also render you use
gradients in your animations, then it is not going to create such amazing gift because
of the limitation of 256 colors offered
by gift format. Okay, so please
keep that in mind, and there are some few settings
that you can adjust here. So, yeah, it once
you select the comp, and then you hit
the M gift button, what it does is it will
render the whole animation, and then it just render it, and then you can just double click it and you can preview it. See? Right? It's perfect. Okay, so that's
the only uses of this, and it is 188 Kws. Okay, so I'm just
going to deulate it, and now we are going to
move to the next class, which is a client
project, actually, which I did in the past, but it is worth
looking at, actually. The client actually
requested the final file to be the gif
animation actually. So that is why throughout
the whole project, you will notice that
there are no ha layers. But instead, the design is
in list or Photoshop files. Okay. So as you can see,
this is the main comp. Instead of Alpha matting
it with the phone, I could have just used the simple mask
technique as well, okay? That is not really a
big deal, actually. So yeah, but because of the requirements by the
client were in Jif animation, actually, so I didn't really bother creating a
mask, actually. Okay, so I'm just going
to open the main comp. Now we are going to
go through the slides and I'm going to tell you that this animation could have been done in Lotti
as well, possibly. And it was a very long time ago when I did
this project, actually. But if I were doing
this project today, I would obviously
make this better. And also, I would
suggest my client and most likely I would just force them to make
the decision to use a Lotti instead of
using a gift animation. Okay. So let's just go
through the slides now. This is the first slide. Okay. And here are the
illustrator layers. And as you can see, the
designs are a bit complicated, let's say, as you
can see here, okay? There is an alternative to this, as well as we discussed in the previous course that we can import the images as well. Right? So we could
definitely convert these into PNGs as well and
then export them as well. And then we can embed them here to reduce the
lady file size. If there are 100 plus
layers in that design, then you can definitely
do that to make a more optimized situation because there are multiple
designs like this. So maybe it will
be better to use PNGs of these instead of using SVGs because there are
so many layers actually. So maybe the PNG will be less sized instead
of the SVG actually. So now let's just go
through our coms. Okay, so I'm just going
to open this one, and let's just open
our first slide. Okay, so in body
move and plug in, we can actually let's just go ahead and re open body move in. Okay, so as you can see, there was an option
in the plug in which we didn't discuss
before actually, which was this option. Actually, this option
is really helpful in these cases because
let's just say that this design actually made the whole latte very heavy because of the
complexity of the layers. So what we could do is we could go back inside our
Illustrator file. It's just let's see which file is this
country select, right? Let's just open our
country select file. Okay? Okay, our file is now opened. And now, as you can see, there are many more layers, right? So what we can do is we can just make this layer
solo actually. It is actually solo
at the moment. So let's just click on it and let's starn off all the layers or we can
just simply go into IU. File copy this one, taste it over here. We don't have to resize this actually because if
we increase the size, then it will increase the file of the file size of
the image as well, which we don't really want to do because we are going
to be using a PNG, so it will affect our
optimization and size. I just save it
control all shifts. I'm just going to make it a PNG. I'm going to hit save, and now
I'm going to see the path. Now I'm going to
name it Singapur. Okay, Singapore PNG. Okay. So now what I can do is I can just search Singapore here. It's not exported here.
Must be a mistake. Okay, so Singapore
is now exported. So let's just go ahead and drag it into the after effects. Okay, now what we're
gonna do is we're going to just drag it over
here and match it. I'm gonna apply the fill effect, and now I'm just gonna Okay, so this looks perfect. I'm just going to
delete the effect. And I'm just going to
turn this one off. And now I'm just going to
make this one off actually. So considering that this was
a Latty animation project, it will really help us reduce
earlier sizes, actually, and also optimize the file
sizes instead of using a SVG, we can use an NG. And then what we can do is
we can in the Assets panel, we can choose the
include injSN option, and it will include
the image as well. I can leave the
compression at 80%. It works almost fine every time. If there are problems
in the file sizes or the animation doesn't look
really good with the design, you can definitely adjust
these compression numbers, and then you can
export it again. And this will include
the image as well, and it will apply the compression
to the image as well. So yeah, that's how it works. Okay. So this is one way to optimize
your files, actually. It's all about finding
the right solution for your problem actually and
making the right decision, right to increase
the flexibility of your file and also
reduced size file. So it works in the most optimal and perfect
situations perfectly. Okay, so let's just go
into the next slide now. Which is Okay, so let's just look at the animation
on this one first. Okay, so all of these
layers are animated actually to this null layer. Okay? So what it
does is basically that it's just done
of the image for now, we can also parent this
as well like this. See, I basically is creating a click effect,
actually, right? So that's how it's working because this project was
created very long time ago, as you can see, there are
some mistakes here. Okay. So this button gets clicked on and then we move on
to the next slide, as you can see here. The next slide comes over. What happens to the
previous slide? As you can see, it it slides
away with the position. Okay. And the next screen is parented to the previous one, so that when it goes
off the screen, it drags the one behind it. And the same principle is applied throughout
the whole screens. As you can see, when
one screen goes, it drags the other
one behind it. Okay. So let's continue, right? These are just two simple
position key frames, so not really much
to explain about it. So let's just open this one and let's just
have a look at this. Okay. So these few
layers are parented to this null and it is
creating a click effect. As you can see, I just label the layers which were
necessary to me, and then I just added a scale animation,
as you can see here. Okay. And what
happens after that is that there is a
next slide, okay? And then it scrolls down. Okay. So as you can
see, the comp is actually bigger inside,
there is too much data. So I just applied position K frames by parenting
and everything. Now, as you can see, there
are some design mistakes, actually, because in the past, I didn't really used
to think about design that much and also didn't
really focused on it. But now, as I have improved, if I do the project again, I would definitely fix
such small mistakes by myself to make
the design better. Okay. So moving on, what actually happens in
this slide is just it gets clicked on the same
button just the same way like previous slide. As you can see, all of this
can be Latty actually, right? The text can be late. Everything can be late
instead of just the image. We can definitely make export
a PNG and import it here, and the rest of the
item can be converted into shape layers,
actually, right? Okay. So moving on what actually happens is this button gets clicked on, I think, yes. This button gets clicked on. Now there is fill effect
applied, obviously, but we can definitely apply the same key frames to the color property as well
if this was a shape layer. So yeah, this is also
very late compatible. And as you can see, it gets clicked on, right, clicks it, and then
it turns into purple. Okay. And then what happens is, let's move on to the next slide. Okay, so this is the next slide. Okay, so this morphs into
the wave layer, actually. So basically the app is saying
that you can send gifts to anyone and also attach a
voice node of 30 seconds. So this converts, okay. Let's just look
at the animation. As you can see, it is
flattening out, okay? That's very simple animation. There's no really
hard stuff going on. It's just scale animated.
That's it, right? Okay. And the inner mic also gets scaled down. Yeah, right? As you can see, once we tap it, it scales up, and
then it shrinks down. And then this line
comes actually. Now, really important to
notice this as you can see, there is a audio file, actually, which was
parented to this. Now let's just find
this layer actually. This is a visualizer layer. Actually, as you can see, audio spectrum effect
is added to this. So it got actually animated
like the vise animates. Okay. Let's just go in
the file and have a look. As you can see, the voice
is animating here, right? Okay. So how do we
do that in late? Well, there is a simple way, and let's just go through that. Okay, so there are
two ways, actually. Let's just go through both. Okay. I'm going to create com. Let's just call it test voice. Okay. Now what I'm going
to do is I'm going to go ahead and create a line. Okay, like this, right? I'm going to just
make it ten pixels. Now I'm just going to
make the center aligned. Now we can do two things. We can add trim parts, actually. Okay. Let's go
ahead and try that. Let's just make it 50, make the other 149. Okay, so that there is
a little bit of dt. Okay. And now what we
are going to do is, let's just make
it round corners. That will look better, I think. See? That looks better. Okay. So I'm going is keyframe both. I'm going to zoom in
a bit a little bit. And let's just try
to animate this. Let's make it go here, make it go here, here,
in the other direction. Two frames later,
one comes here. The other one goes here. Okay. And then you can just go through these and then
just do it a little bit, and then you can just clone the key frames like we did
in the previous course. Okay. By the way, I explained these plugins
in the previous course. So if you need understanding
how to use them, then you can just check
out previous courses. Okay, you can see, okay, this works, right? Okay. And you can
just use it and just let's just make the path longer,
actually, like this. And then, as you can see, you can just use the same
method and do it many times. Okay? And then just keep going. That's it. And then you can recreate all of these and also, let's just make it three. So there are small lines between them as well
if you want to. Okay. And let's just play this. Right? Now obviously you can offset the key
frames as well. But let's just try that. It's going to make it. Let's
just bring it over here. And now I'm going to make
it randomize actually. And I'm just going to
make the step ten, and let's just hit sequence
and see what we come up with. Okay, so there has
been a mistake. This will be one, but
the offset is going to be ten. Okay, my mistake. Okay. Let's just
go ahead and play this. Okay, so let's play this. Right? So it seems
like that the voice is being sent or the
voice is being played. Okay. But another
method that we can try, which is far more
simpler and easy. Now that is going to be it might affect your file
size a little bit, but it is much
more easy to edit, and you can apply the revisions of client as well really easily. Okay, I've created this path. Okay, same method. I'm going to make it ten,
so we can see it clearly. I'm going to make it all. So again, around caps. Okay. And now what
I'm going to do is I'm not going
to add rim parts. Instead, I'm going to
click my scale property, and I'm going to
add a expression. Okay? And how expression works is basically
complicated to explain, but it's just if you're
familiar with the expressions, then it'll be easy
to understand. But if you're new
to expressions, then I would highly
recommend that you check a basic tutorial about
it on the YouTube maybe. Okay. So I'm just going to
type in some values now. I just see how this looks. Okay, so as you can see, this looks this works,
I think, right. What we can do is we
can make it 80, right? Okay. And let's just try
to make the sacking value, 200 and see what will happen. Okay. As you can see, this does not look realistic. So let's just bring it down to 20 again and make this 1800, see what this will do, right? It seems like the
voice is being played. Okay. And let's just do it back to 50 only to
see the difference. Okay, so what you can do is you can create multiple
copies of this, right. You can scale these up as well, or you can just set the path and make it longer
on both ends, right? And if you have to
adjust the wavelengths, you can just edit
the expression. That's it. That's
all you have to do. You just have to
copy the same layer again and again and again. And then what you can do is you can just edit
the gal expression. See, looks more
realistic, right? There is some randomization
in every layer. And for the small nodes
or nodes in the voice, you can just select this
and make these smaller, or make one of these small and
then copy that one, right? And then you can create the
wave out of this like this. Okay. Sorry, my bad. Okay, let's try and play this. I'm going to make it 2 seconds,
and let's just play this. See, this looks more realistic. Obviously, you can
drop down some of the layers even more,
but you get my point. Now, how do we export
this animation? Okay, this is really important. Now, what do we do now? I'm just going to, um, select our test Vice comp. I'm just going to
go into settings, and as you can see, there's no extra
options selected. Now, let's just
try to export this and let me just tell you that
this will not work, okay? Okay, so test Voice, No. Okay, so this is
previewer animation. As you can see, it
is working, right, but there is still
something to keep in mind. Before sending the
file to the client, you have to check
the latte actually, and it might not work on
maybe mobile or maybe on web. So before you send this, you just have to go
into the settings, go into the setting of Scroll down, get into
expression options, and select convert
expressions to keyframe. Hit save, and then
you can go back here. As you can see,
the size is 20 KB. Let's just replace this. It's hit render. And let's just check the file size again. Okay. As you can see, the voice size is now 89 KB because it converted all
the values into keyframes. Okay, so yeah, this will also works in the same way actually in the body
movement plug in. But if you render the
animation with this method, then it will work perfectly
across all platforms. Okay. So let's get
back into our studies. So yeah, you can add the
animation using that. And then after that, the button gets clicked on the next
button, actually, right? And what happens is the voice
plays here a little bit, and then sliding into
the next one, right? Okay, so what is happening here is let's open this one up. Okay, so this is
just a text layer, basically a shape layer, and we are using a
mask to reveal name. And then there is a layer of every line
which is masked out. Okay, so it is all one
layer, I think, yes. There are three masks
on the same layer. Okay. So yes, this will also
work perfectly in late, but I would highly
recommend that you choose one line for one mask and then
duplicate that same layer. Don't use four masks on the same layer because if the mask interrupts one another, then the late might crash
or not work perfectly. Okay. Getting back
into the main comp, after the reveal of the message, the next button gets hit again, and you're on the checkout
page, you scroll down. As you can see inside here. Now, all layers are
parented to one layer, which is the fifth
layer, the last one. And then because there was
no need to add object, so that's why it's
animated this way. Okay? So it scrolls down. Press you as you
can see, here is the scale animation
of the button. Okay. Now who you have sent it, and then it transitions
into the access screen, and then you can see how
there is chat animation. Now, we have seen
chat animations actually before in
the previous course. Now, this one is
not animating quite well if we compare
it to those ones. Now the reason behind that is because the utility
of text animation and chat purpose here is very less because we have presented
the whole idea of the app. Right? So the interaction
between two people is not really as important
because our product is not their
interactivity based. Now, if you are animating
AI chat bot chats, then the interactivity
matters the most. But in this case,
the productivity, the product, the company, what does the company
do matters the most, which has already been shown
in the animation previously. So that's why we
animated this in a very fast and
hasty way, right? As you can see, the notification
gets to the person, and then he says, Thank you. And then the last slide, when the person clicks
on that message, actually, let's see, I
think it gets clicked on. No, it doesn't. Okay. So
yes, this one opens up, and then what happens is that the voice nodes gets played.
This is really easy. This is just a waveform layer, and it is a white
layer actually inside, as you can see, so all layers
are separated, actually. Um, I could have
just used the merge, but I don't think I had
this plugin before. Otherwise, I wouldn't have to
create a pre comp on this. So you can see
that these type of things can save you an entire
pre comp, actually, right? So you can just mask one layer
instead of pre comping it. I could have just masked this instead of going
back into this comp. Yeah. So that will
work more clean, I think, if we have to make ideas or change the
color, actually. You can just write the
layer and change the color instead of going back inside
and changing the color. Okay, so this gets
played and then they receive my button gets clicked
and the animation ends. So that's how we could have achieved the same animation
using art animation as well. That's why it was really
important to show you how you can
create this type of animations as well by importing or using
the export options of including the images inside your animations
using this feature, and also using expressions when needed for certain layers, like the Voice one that
we had in previous slide. Okay, so that's it for this
class in the next one.
5. 04.Project Case Study: Welcome back to the
course. Okay, so I'm opening a client project, and I'm going to
try to show you as many examples as
possible that how I deliver client projects and how I create their
animations because the main part and the main
focus of these courses is to teach you guys how to create animations for your
clients actually, right? So this is a animation
that I created for a client actually a
few months ago, okay. And what they wanted
basically was that they created an
AI software which helps students create their in the education of the
children and students. Okay, so without further ado,
just go through our file. Let's just go back
into our main comp. So this is our main comp. Okay, there are main two coms. So we also have one comp, particularly, this one, which
actually gets rendered. It's not this one, actually. It is this one, the render one. The client actually
requested in the end that the entire animation
should be shown inside a desktop actually, because it was the desktop
version of their AI. So I just took this desktop
from a free stock website, and then these are
just share players. Okay, I just used overload and input it here
using overload. Okay. And now what
is going through, what's happening here
is let's get into that. Okay, so this is
the main animation. Let's just get into
the first com. Okay, as you can see,
there is this avatar. First of all, we cannot
make this avatar a SVG. So this is just an AI avatar, and this is a PNG image. And I use the same option that I showed you in the
previous class while entering it and keeping the image option
available, right? Selecting that one that include the raster images
in the JSON file, and then this image
rendered perfectly. Okay, so this is just
animating very simply. Okay. So this is basically
thinking and guiding. That's the motto of these three key frames that
we are trying to show. Okay, let's get back
into our main comp. So, um, let's hit U on our
keyboard so we can see. Okay, so this is the first
layer that animates. It scales up, okay. And then there is
this text layer. And I have used the first option here in the setting,
the Glyphs option. Okay, tick this one and you can just keep editing the text, and it will just
convert it while rendering the file into
share players actually. Okay. So the first line
actually animates using mask, a very simple mask, okay. And there are two keyframes
on the mask and it reveals. Now there is something
important to highlight here, which is someone
might think that it is not a professional
way of animating this maybe because people want the writing effect to actually show letter by letter, right? You can achieve that by
converting this into a share player and
then just offset it by one key frame like we
did in the previous course. But that is not
very advisable in this situation because
as we go through here, there is tons of text
actually animating. So it will take a
lot of time to take one keyframe for every
letter actually, because then this will become two or three times even more. It will take even more time, actually, right? It's
currently taking. Let's just see how much
time it is taking. It is taking around
6 seconds, right? And then it will take around
18 seconds to animate. So we don't really
want the user to be get bored from the animation, actually, because this is
a tocas animation, right? This is going to just if
you look at the animation, you can completely
get that what is AI capable of doing for you. So our job is to create
an animation which portrays the meaning in
very less time. Okay. So all of these shapes are just shapes, simple
shapes, right? So there is just a
scale animations. The anchor points are shifted at this site
using this plug in, which we discussed in the
previous course. Very simple. And these are just
the tax layers using the same mask technique. These all get revealed, right? Okay. So when all of these are animated and then this
button reveals itself, okay, it reveals, and then the click happens on
the submit button. Okay. And then what happens is, we get into the second comp. Okay. Let's hit you
on our keyboard. As you can see, it positions
in the upper direction. Okay, you can check the
easing as well here. Okay, it goes in
the upper direction with the opacity as well, so it basically
fades away, right? And then the A starts
generating the answer. Let's go into this comp. And before we continue, I'll just open the
illustrator so I can show you the design file that the
client actually sent me. So let me just show
you that real quick. Okay, so this is the file
that client actually sent me. This is the main page. Now, as you can see, I
made some modifications. I removed the
background of this lady and replaced the background with ayer, simple shape layer. Okay, because I preferred
the client to use a simple circle
on the background instead of using a square
because then we want to be able to animate this
lady inside it. So they agreed. Okay, and then what happens is,
this is the first slide. This was actually a reference of their mobile app version. They didn't actually
need this one. They canceled this
version actually. So we went with this one only. We didn't work on
this one actually. This was just a style frame. Okay. So here is
all the texts that the client said that
the AI will write down. Okay. So this is
the reason why we couldn't make the letter by
letter effect, actually, because this will take
more than 50 seconds to animate because
of so many letters. Okay. So how did I animate this? Let's just get back
into our illustrator, into our after fact sorry, and let's just see how
I animated this. Okay. So here is the comp. I made it actually bigger size. As you can see, I
increased the height. Let's just go back into our illustrator and
check the height here. I think it is also 5,000 here. But let's
just have a look. Okay. So as you can see,
it is 3,200 pixels. Okay? So I actually increase it because because I wanted to create a scroll
effect, actually. Now, I could have deleted
this upper space as well. But the client actually
needed this really fastly. So I was just looking to
create the animation, and there was no
harm in creating this white space, actually, because there wasn't any other
complex objects or layers. So I just went with
it. But definitely, it should be on top here. Yeah. Okay. So first of all, this layer animates
in the very same way. Okay, no difference. It doesn't scale up because we have already did that, right? So why make it a scale up? Again, Because it's just
writing the answer now. So okay, so how is the text animating?
Let's look at that? The paragraphs are divided
into mask layers, okay? And then what happens is
that there is a mask. Let's hit you on our
keyboard, and as you can see, there is position keyframes and there is opacity keyframe. Because the whole
purpose of showing AI animations or AI
using AI software, there is also a huge element in creating AI animations which you have to
keep in mind always, which is that the AI
is going to reduce the time that the task is going to take you if
you don't use AI. Okay? So AI is basically going
to save you tons of time. So that's what we are
trying to emphasize here that it produces
results really fast. So all layers are just offsetted like using this
plugin, simple as that. Okay. And this all
animate, right? And then after that,
what happens is, as you can see, we write the person who is using the
AI writes another question. Okay? A follow up
question basically. And then the AI responses
to that as well, right? Pretty simple animation.
Nothing too complicated. Let's go back into
our main comp and see how I made the
scroll effect. Okay, as you can
see, here is the first positioning E frames. Okay, let's just
slolow this one. And as you can see, here it is. Okay. So the animation
starts from here, okay? And till here, it is not
animated in position. It is just a opacity
key from in the start. Now, from here, the position animates because the text
is full on the screen, so it goes up and
then what happens is We get back to the bottom
of this layer because we want to show that
just like Whatsapp, the typing bar is
below on the screen, so it should be on the bottom of the screen around here
until it is written. Okay. And after
that, typing of it. Okay, what happens is very
simple fact happens actually. Let's just go back
and check that. Okay. So what happens is here
this text layer goes up. Let me just turn on this.
Okay. So this layer goes up, and this layer gets
opacity key framed out. Let's just press you on
our keyboard and see. As you can see, this layer
goes away, fades away, right. And then this one positions
in the upper direction. Okay, and that's it. There is no additional animation going. Okay, so this is
parented to null, actually, and the null is here. Actually, the whole bar
is animated to this null, and this null
actually animates in the upper direction
so that the person, icon also moves in the upper
direction along with it. Okay. So just to
save some keyframes, I just added null object. So after that animation,
I again appears, and then it's getting
animated again, and it types all the answers
again in the same way. Let's go back into our
main comp and have a look. Okay. So now it holds the animation around
here for a little bit, and then the position
animation starts again. Okay. And simple as that, the animation
completes itself and starts over again.
And that's it. Okay, I'll just unsolve it and you can see the
whole animation Okay. So this was a
very simple project. And now I want to show
you a little bit, similar as well, which was another client's
project, actually. Okay, so this is the
animation I created. Let's have a look at this. Okay, so that's it.
Okay, so basically, this is also also to check the previous file size
of the previous project. The final animation size
was the desktop version, I was actually 261 Kb
only, and that's it. Because we use this option inside the inside the
body moving plug in, the glyph option, that is why the file size
was very small. Let's just open this
project now and let me show you what I did in this one and how I created this. Now, for this one, I created the design
actually by myself. So let's go ahead
and have a look at the design because it is not really as challenging
as you might think. Okay, so client basically
actually sent me an animation, which I cannot share
with you because of their privacy
because they didn't want it to be shared anywhere that who they were
referring to actually. Okay, so basically,
this is a AI tool, which automates the
generate sales leads. Okay, so these were the client colors which they provided, and these were the fonts. This was the requirement
by the client. I just created six rectangles and copy and pasted
the values here. Okay. And after that,
what I did was I created these buttons,
this button animation. And these buttons are
really very simple. And as you can see, the strokes and fills are on the button. There is just typeface. There is this small icon. I've tried to match the
color scheme of the client actually in order to keep everything with their
branding aligned. And then the arrow goes down. So basically, someone submits a form and then please contact through the
active campaign. It is the first
thing that actually happens is a form fills up and then the contact is made through the active campaign
which they are using, and then did they
answer it or not? Did they answer yes to
question four in the tie form? If it is a yes, then they
send a discounted link. If not, they send a link
without the discount. And then in either conditions,
they wait for two days. And then if they open the email, if yes or no, right, the alert them to follow up
over the phone and if yes, tag with self serve lead, right? Okay, and then the client
requested some changes. Also, this is really
helpful tip, actually, you can just duplicate the file while creating the
visions of the client. So the client actually wanted the box to be handmade feeling. So I just added some
anchor points on the box and then
just adjusted them and just made them not a straight path and just added
some curves, and that's it. And then after that,
I just duplicate it the same box everywhere. Also, they requested that the form should be
in blue color, okay. And the other ones were in pink. Also, they requested
me to change the color of the
arrows, and I did that. Once the design was approved, they also requested that I
should add the ZPR icon here, but they insisted
that everything should be aligned
to their brand. Okay. So after that, they approved the version, and then what I did was, this is the feedback actually
on the previous one, right? They told me what to change, and then I applied the changing. Okay. After that, what I
did was I just went ahead. Now, because of these parts were not because dashes cannot
be animated inside after effects or
let's just say that the head of the arrows when
we import the other file, let's just do that and let
me show you how it works. Okay, I'll select this. I'll go into my after effects. I'll open a new comp, and now I'm going to
make it white color. Okay. Now let's just hit Okay, so I can show you what will
happen if I import this one. Okay. As you can see, it did not add the head of the arrow. So we needed that as well. So what I did was I just went ahead and selected all of these and then just went into object and expanded
the appearance. That's it. And then
it converts them into the shape layers so
that I can animate every element without
any problems. And these strokes
remain strokes. Okay. Okay, so now what
actually happens is, when the design was done, I brought it into here, and then I created this
design comp first. Please make sure to only input the design in a separate com
first before animating it. Then duplicate the comp, okay? And then what you can do is create the animation
in a separate comp. That way you will have
that design here. Let's just say I add a few
keyframes here and there. And I due to some mistake or some problem or maybe an
error or just a mistake, I mess up the design. So then I can just go back and grab the actual
design from here. Or if the animation breaks, I can just delete this comp and duplicate this one again and
start over the animation. Okay. So this is the person
who is on the platform, and he is basically
going through a journey. He or she is going
through a journey, right, through the form. So and also the client wanted the animation to have
Zomi in effects. So how do we actually
create that? Because we cannot
use three D Lers because those are not
supported by late files. So what do we do about that? So for that, I just created
the whole animation, first of all, okay? And then I reduced
the comp size, Okay, to only 500 by 500 pixels because that was the
request from the client. And then what I did was, I created all of
this animation and then parented it to null object, which is, as you
can see, animated. Here, as you can see, if one part is not
being animated, there are keyframes
on every instance, like on position and
on a scale both. Be as we did a very complex project in
the previous course, you might know that adding
dummy keyframes is really important in order to adjust the timing of
the animation later on. Okay. So what happens is,
let's just go through that. Let's just log this null. Let's press on our keyboard, and let's just go through
all of the layers. I'll press, okay. And as you can see, there are only two layers which are
being animated, actually. The first one is this character. So basically, the whole point of this design to be perfect is really important
because the design is the essential element here. In all of most
likely animations, design is really important. And in these cases, because this is a product
showcase animation or introduction
animation to a product. So in these animations, that design actually
matters a lot. Okay, so this little guy
actually animates downward, okay, it comes to here. And then the same key
frame is added here, okay? Around here, there is no interpolation between
them or if there is, it is not really it does not
really matter because it scares down here and because
it is behind the layer. So it doesn't really matter
if how it's animating. Okay, so then what happens is, the I just use the scaling on this null and the positioning,
and that's it. So we are basically
going through a path, right, and then we are just navigating ourselves inside it. Okay. So we just get
into this forum, and then the scale
decreases down, which creates this
zoom out effect, actually, we are just
using the scale here. We are not using anything fancy, but still we got the effect
done perfectly, right? The person comes into the S and then and
then what happens is, these are the same
key frames duplicated here so that the
animation is holded here, and then after that, it
gets animated again. Wait for two days, right? It moves from here to here, and then we move down from here, and then this guy
animates again like this. And then we go back
zoom out again, as you can see, this is here, 100% scale, and this
is now 50% scale. Okay? Nothing very
complex, very simple. And now this drags
down into this column. Okay. And as it drags down here, we zoom back in. Okay. And as you can see, we drop down to here now, and the animation ends
here, right? Perfect. Okay? No issues
successfully done. Okay, so this was
also lot compatible, and the font were
just converted into the share players using
the same option, right? This one, the cs one. Simple as that,
nothing very complex. Now let's get into a very simple animation and
another example, actually. Okay, so now we have a
look at this project. Now, this was created
for another client. In this one, the design was
actually provided in Figma, but there were some tiny problems which I
fixed, actually. I converted the design into SVG. Okay. And then what I
did was, as you know, the images are imported
from Figma directly if we use the AEUXplugin like
we used in the first class. Okay. And then what happens is the animation
is really very simple. There were some problems
in these lines, actually. So I just edited
them in the SVG. Let me just open the
design file actually. So I can show you as
you can see here, this one is a more flat example. Let me just open another one. Okay, so as you can
see in this one, I drew the references. Okay, so let me
just go ahead and turn this off so I can
explain what I did. Okay, so these are
the one that I drew. Okay. This is the design
provided by the client. Okay? As you can see, if
I drag it here alone, you can see there are
segments in the arrow, but it should be
just a simple line. Now I cannot animate it using trim parts because
it is a fill, right? We cannot animate a fill. So that's why what I did was I created these purple
layers on top of this. I basically retraced the lines to apply better easing
on the animations. I did this with
all the animations that the client requested me. I created all the
arrows myself again. This this only took 5 minutes, but it made the animation
so much easier, and I didn't have to
do mask on the layers. I just used the trim path,
as you can see here. As you can see, the end of
the trim path is animated, actually, and nothing
else is being animated. And we have a very
simple effect. And then this header
also animates using the end and the
start both on 50 50, so that it animates
from the center. The other animation
is very simple. There is opacity on the buttons, and there is a scale also. Okay. And then there is just image
animation is only opacity. That's it. Obviously,
these are a lot of layers, so it might seem
a bit confusing. But if you watch the
previous course, the intermediate
class, then it will seem really easy to follow up. Okay, so this is just
a scale animation, and there were some
standards that I followed across the animations, which are the scale
animation is ten, 20, 21, 22, 23, 24. Every scale animation
is 24 frames, okay, as you can see here. And also this animation, this is also AirScale animation. As you can see, this
is also 1 second long. Okay, so you have to create some standards when
you're creating animations, multiple animations
for the client. You have to keep those standards and follow them in every
animation that you create. This will help you deliver
consistent results, and you can just write them
down in a note pad, actually, like which value is
going to be which, the scale is going to be 24 FPS or it's going to be frames. Okay. The line animation is
going to be only 12 frames. You can just write
this down actually. Okay. And this will make
your job really easy. Okay. And I highly recommend if you are
using Figma designs, then do not create all
animations in one file actually, because the layers
might get too much problematic or if the client actually the design
which was given to you, if every element
has a frame, right, like we discussed in
a previous class, then every element will
be placed inside a frame. So you'll just have
to go through com, com, com, com comp. But now that is
not the case here because I just put it
them inside stator. And then what I did was
I used this and used overload and took this into after effects using straor
instead of using Figma. And then I just exported this avatar image from Figma separately and
then imported this here. Okay. So that's how
I created this, and that is why I used the same animation project for all the six animations
that I did for the client. The other animations are also
very similar and simple. So I don't think it is necessary to go through all of them. But there is that
consistency element, which you will see throughout
all the animations. If I play all of
them one by one, you will not be able
to see the difference or there won't be any
variation in the animation. It will look very similar and it will make sense that these are all from the same client or these are all from
the same company, and it will be placed on the
same website page. Yeah. So these are some
little details that you can keep in mind while animating
assets for the client. Okay, so that was
it for this class. I'll catch you in the next one.
6. 05.Animating Masks: In this class, we
will learn how to create the writing effect that
you can see on the screen, and I created this for
multiple client projects, as you can see, This is very simple to create actually
in after effects, but it is a little bit
complicated if you have to create it in a late
compatible JSON Lottie. So let's just get started and let me show you how
this is done actually. So there are multiple ways
to do this in Lottiefiles, particularly actually
in after effects. So let's just go
ahead and create our new comp and let me
guide you through that. So we will create a 1,900
by 1080 pixel composition. And after that, what
we are going to do is let's just say
that our client is myself right now because we do not want to
get into details of working for a client
right now because this is just an example to show
you how things can be done. So let's just increase
the size and after that, we will change the
color as well. And after that, we will change
this into shape layers, as we have discussed
these already, that shape layers are
compatible in Lottiefiles. After that, we will
go to Motion Tools, and we are going to
extract every layer. So as I mentioned that there are multiple ways to do this. So one simple way to do
this is very simple, which is let's just go ahead
and look for the windows, and let's just go to
effects and presets panel. Now we are go to search
for a stroke effect. Let's just drag
and drop it here. So now we are going
to select this layer, and then we are going to just
create mask on top of it. Here's how you can do it,
click at this button, and then we're going to click the mask and then
create a layer. After that, we are
going to create another mask like this. Now this is just to
show you how many ways you can do or achieve
these results. Now we are going to
select all masks, and we are going to
change its color to red so that we
can see it clearly. Let's just increase
brush hardness to 100. Let's just increase this size. Okay. After that, what we are going to do is
zoom in a little bit. Let's just go ahead
and animate this. And we are going to reveal
it on transparent, right? Or reveal the image. You can see that if you want to reveal that mask on transparent, you can see this is happening. And once you select the
reveal original image, this is what we
are going to get. So you can see that
we are creating a writing effect pretty easily. You can use this to
create a reference point. First of all, create a rough guide for
your types animation. And then after that, you can
send that to your client. Once they approve it, you can let them know that there will be small mistakes like
this overlapping, you this shouldn't be happening. But you can explain this
to them that this is just a rough overview of the
easing of the animation. You can use this
simple technique to create all the
animation within 10 minutes and then because the Lottie animation
is going to take longer. So you can just show this to the client and then
get its approval. And another technique to use over here is that there
is another method, which is let me
show you that now, which will be let me remove
masks from the layer. Let's just go ahead and
create a stroke layer. Now, on top of this, now what we can do is we can
use the Alpha mat option. So let's just Alpha
mat over layer, and now after
creating the stroke, you have to go here
and add trim paths. Now what we are going to do
is animate the trim path. This way, what you can do
is you can basically make the different parts of the animation layer
have different easing. But in the previous case,
we couldn't do that. Now, this is another
method that you can use, but this is also only
useful for references. This cannot be rendered perfectly in Lottie
animation as well. So let's just delete
that. Now let's look at what can work in
Lottie files actually. Let's just click on our
layer and we are going to create a shape layer
mask like this. You can change the color of
mask as well so that you can differentiate between your shape layer color and your mask color. We are going to go
ahead and create, create a keyframe, and then go backwards like this.
Simple as that. And now you can see.
Now, this effect is actually compatible
with Lottie. Now, after that, what you can
do is create another mask, click here, draw a mask. After creating the
mask, what you have to do is just animate
this one as well. Let's just go backward
frame by frame because if we animate in front words
actually in the timeline, we're not going to
be able to handle so many of these handles actually, which we can handle right
now very easily because we have to handle right
now one handle at a time, but that will not
be the case if we go in the forward direction. So it's better to
do it this way. A On the first K frame, what you have to do is just
take this out of your shape. That way, the first K
frame is always clean. Now, let's just say that we want the first layer to complete, and then the rest of
the B starts animating. So we'll sect the next mask and we will go ahead and
put it here like this. And now you can see
that it is animating. This method works really well. Now I have created multiple animations for client projects. Now I will show you
how I created those. You will see that there are some small gaps and issues like this. We're going to cover these in
a much complicated course, which will be a separate class. So we will discuss this in
detail in a future class. Let's just go ahead and
look at our other projects. So this is a revibe logo, splash screen animation
that I created. You can see the logo
animation that I created. So as you can see, I use the same technique that
I just showed you. So there is this R, and this is actually animating from
the bottom to upward. Now you have to keep one thing
in mind that how you would write yourself an R on a
copy when you're writing it, you know, imagine that
you're writing this, you know, like this. So that is how we are
going to animate it. So first, the R comes from the bottom and
then the second line. Now, I used a separate
layer for this because I wanted to have separate control over
separate layers, and you can see that
I did basically the reversal path animation
here as well on the mask. And then after that, there
is this third layer as well. And by the way, all the layers have the entire path
available to that. You can remove that as well if there is more than one path, but if there is one path, what you can do is you
can just keep it there. I highly recommend that
because what actually happens is once you have
animated everything, let's just unsolo the layer. And you will notice here
that there is a small gap. Now what actually
happens is if I deleted the previous path let's just
say, everything was deleted. There was no data
here, only this data, then you couldn't
actually overlap this keyframe on top of this
layer to fix that issue. So you have to keep
these small things in mind before animating. Now, because I have done this multiple times and I've done 100 plus
projects like this, that is why I know these things before creating the animation. But once you are starting out, you will have to
keep these things in mind before creating
the animations. After that, we have
the E animation. Which is a two part. So this is the last part, and then there is this E part, which is also done the
same way that you would write an E. So
pretty simple to do. Nothing too complicated
over here as well. And after that,
we have a simple. After that, we have AI, which is actually only done by vertical scale animation because we didn't need to do the
path animation over here. It wasn't necessary. Then we have B, and after that, we have E. T E is actually a duplicate of this E. The original E is actually
sitting here, actually. I just used this as a
reference so that I could drag the previous one exactly
where it belongs. You can see that everything
fits in perfectly, right? So everything is
where it should be. So that's why you have to keep the references
in your comp as well. You can take it out after the
client project is approved. You can read the
final layer as well. Or if you can also turn off
the visibility of the layer, it actually does not render, so it will not increase the
Lottie Json file as well. So it runs completely smoothly. A if you are concerned that if the key frame by keyframe
animation adds more data, actually, it doesn't,
because we are not using the autotrace
feature here, right? So that is why it is surprising
that once we do not use the auto trace
feature and if we do the frame by frame
animation by ourselves, it does not increase
the file size. So it only happens when you are creating the
autotrace effect, right? You're not doing it by
yourself frame by frame. And also, one thing
to keep in mind, which is really important is if you want to adjust multiple, like you have done this
frame by frame animation, now you want to increase or
slow down. It's a speed. You can just alt and
drag the key frames to adjust the speeding as well. So that's how you create
the writing effect. Now, I wanted to show you some really crucial
examples as well because sometimes vector
is not always the answer. Now, what do I mean by that? Here is another
project from a client, which I want to show you because this highlights something
really, very important. The client actually
shared this file and they wanted this
vector animation, but I didn't use that
method. Now, why? Because if you notice on
the illustrator file, this is actually a brush. Now, the brushes do not
actually get exported into you know not like a stroke. So basically, I had
to expand the file. Actually, the client
provided the expanded file, but it does not matter
if they provided a stroke file as well
because brushes do not really transfer into after effects using
the overload method. They just transfer a stroke. And if I use this shape layer, what it is actually
doing is now, I did try to do this, but actually my PC
was lagging a lot because every single element
over here like this layer, every layer is actually becoming a separate layer
inside after effects. So this one layer is actually
creating 200 plus layers. So that is why this is
not an optimal solution. For that reason, what
I did was I actually closed all the layers,
and one by one, what I actually did is I kept one open layer at a
time, one layer visible, and then I hit Control A shifts, and then I get this
PNG 24 transparency, file out of it, save it. And I did that with every
single layer individually. And once all that was done, what I did was that I took
those layers like this, all these separated pieces. Let me just close
this and show you. I just drag and drop this here. I'm going to create a new comp. I'm going to select all
of these and then show you that we have everything
at the same location. After that, what I did
was pretty simple. Let's just turn off all the
layers and let me show you. I just created a mask,
simply like this. And this way, you can adjust the speed and easing of
it as well pretty easily. So you can just do the easing
however you want, right? So it's up to you. It's completely
up to you how you want to handle the
speed and the easing. And also, because the size of the canvas was really small, which was let me show you, which was 400 by 200 pixels. So the layer size is
not actually huge. The entire canvas is around, as you can see, 200
pixel height only. So this layer will be
around 50 pixels only, most likely, or even less. So that is why the file
sizes were really optimal. So I used this approach instead
of using the other one. Like, we didn't go for
the vector approach here, and it we really well. The animations run
really smoothly, and also the client actual wanted something you know
that runs really smoothly. That is the whole point of
creating Lottie animations. They do not have to be laggy. They can't be big
or heavy sizes. And let me show you the
final sizes of the file right now that there is 18 KB, it's 150, it's 150. It's 160 6 kilobytes, and it is 140 3 kilobytes. And let me show you
other animations as well so that you can just
get a look at those as well. You can see that those are
created as well the same way. So pretty simply
done the same thing. In all the other
animations as well, right? And then you can
just pre comp it and also take it to
whatever comp you like. And the client didn't want the scalability because they were going to be used as signature
somewhere on their website. So they used it as
very small sizes. So as you can see, this
looks really lovely. Now, there is another limitation that a project had which
I want to show you. Let me show you the
animation first. Have a look at this one. So you can see that the
feel of the design is very sketchy and they were
actually pretty badly done. So let me show you
what I mean by that. Unfortunately, I do not
have the design file, so let me just show you the
design inside the animation, that how the animation is
actually breaking over here. So let me just show you how these things are arranged and how poorly the design was done, as you can see that
this hand is alone, but you can see that the
pieces are really very broken. So in these cases, what you have to do is just
work with what you have. You can't really
complain about it. You have to find a solution
around these things. So you can see that there is very minimalistic
animation done because I only animated the things which were adding meaning to it. And also, because of the
field of the newspaper style, I wanted to keep it a very
minimalistic approach. So there is this bird animation, which is pretty simple. There's just the
rotation on the layer, and then there is just the
bird going up and down. That's it. And then there
is blink on the eye. We have discussed the blinks in previous class as well,
so you can check that out. And you can see that there
is just bud flap over here. Other than that, there is just very simple eye blicking on
this lady, the same way. There is just a little
bit of moment on the eyebrows because they
were separate layer as well. And then other than that, there is just a bit of hand
moment as well on both hands. And then other than
that, there is just this cat that is animating it the ear
was actually separated, so I made sure to animate
some detail into it. And then this ear
was done really poorly because it is
part of the head layer. So there is just only one path. Let me just show you.
You can see that the entire head is
actually driven by this. So that is why I kept
the motion minimalistic. If I added too much animation, I could just bring the anchor point to here
and basically just, you know, parent
everything to the layer. But if it had too much motion, it would distract
the entire scene because there is
not much animation going on everywhere else. So I just wanted to keep the
animation very minimalistic, and I brought the
life to cat by just animating the ears
because cats do have a habit of doing
this all the time. And other than that, there is only just eye moment. That's it. Pretty simple. So on the other half of the illustration
that I showed you, which is the right part, what I have done is really
very simple as well. You can see that there
is this scooter, which is apparently to annul, which is just bouncing like
the engine has started. And then on the other hand, there's just these
cactus limbs that are just doing some rotation
animation, pretty simple. And other than that, there is just these leaf
animations that are just getting swing by the
wind in the environment. That's it, and there is just subtle animation
on the clouds, which are just loop
payable as well. So all of these animation, both animations are just
loop peable animations which have starting and
ending same points. And so the point of showing you all of this
is that sometimes we do not have the optimal
solutions or the situation to give what
we actually want to deliver. And in those case scenarios, we just have to work
with what we have. Now, it's not that we cannot animate this stuff
as well. We can. But the thing is we can achieve some really great results
using puppet pins, but that is not really the optimal solution when
you're working with Lottiefiles because
puppet pins do not work in Lottiefiles. So you have to keep
these things in mind before animating or
creating anything, and you should
communicate these things with your client before
starting the project. So that's basically it. I hope that you learn something
new in this class, and let's see you
in the next one.
7. Outro: Proud of you all for making
this far to this course and congratulations to all of you for completing the
Advanced Lot files guide. Now, there will be two courses which will be available
really very soon, and there is going to be some really exciting
work coming your way, and you will be able to offer some excellent services after
watching these courses. Now, you guys are
ready to go ahead and create Late services
for your clients, and I wish you all the best. Let me know if you
guys need any kind of help and if you need
any kind of guidance, really reach out to me
on Instagram if you need any type of guidance regarding
your client projects, I will be more than
eager to help. Make sure to go ahead
and submit some work in the class as well and
also review my work. I would love to
hear from you guys that how I am making
these classes and also get to know what things
I can improve in my classes. Good luck to all of you for creating perfect animations
for your clients, and Bold Bite will
be back really, very soon with
exciting new projects. Thank you so much.
Take care. Bye bye.
Bolt Bite, Tournament Winner Lottiefiles Creator.
