- Hey designers. I'm Charlie.
I'm a web designer.
I am not a motion designer.
However, I did recently create an animation
to go in the header section
of the ConvertKit homepage.
ConvertKit is the email marketing
software company I work for.
And I just decided that I wanted the header
of our homepage to have something animated
that showed a tour through our product.
If you haven't seen them,
I make weekly blogs just showing you my life and my work.
And I was talking about this animation in those blogs,
and I had a few people ask
if they could see a more in depth look
at how I created it.
And so that's what I wanna do in this video.
Let's start off by me playing you the animation load,
so you can get a look at that.
So the animation starts off with this footage of a creator,
my friend Eric, actually painting in this blob,
which moves into a landing page.
Someone fills out the landing page,
like signs up to his a fake email list.
Then we go through this flow,
which is like an email marketing automation flow
showing stuff happening
because you signed up to the landing page.
And ends with someone being sent an email,
and then the head of section there moves back
into a video and it loops around.
I was really proud of how this came out.
I think it's a good demonstration of,
who uses us and what we're for.
So let me show you
how I as not motion designer made this happen.
(bright upbeat music)
So I created this animation using after effects.
This is a tool that I've used before in university,
where I did actually take some motion graphics papers.
So I had like a bit of
a background understanding in animation,
of Keynote animation in particular,
and how After Effects works.
I'm not gonna give you one-on-one
on how After Effects works in this video.
There's plenty of other tutorials that they will do that,
but let me just walk you through my file
and the different pieces
that make up this animation of mine.
'Cause my motion design skills are limited.
Really this is just a lot of key frame animation.
It's playing with the transform elements
that we have here in After Effects of position
and scale mostly to have things appear on screen
at certain times when I need them.
And I just make a key frame move it
and make the next key frame.
So we start off with this footage as you saw,
and instead of it being a square
it's in this blob mask,
which all I did was have the vector in illustrator
and then I just Command + C
and then pasted it, Command + V on top of the footage
and then it turns it into a vector mask,
which is really helpful.
So that's where we started out.
To get this morphing piece,
see how it transforms itself into fitting
in the landing page.
So I made another mask,
the shape of this in illustrator
and just copied that in.
And then all you need to do essentially
to morph to mass together is...
So there'll be a second mask here.
You make a key frame,
and you just copy the key frame
from the second mask and paste it
onto the path of the first mask.
And then it'll animate itself between the two versions,
between the two key frames.
I did have a couple of issues with this where...
See how this shrinks down nicely beforehand.
Like this top point for example,
was flipping itself over
and trying to end up down here.
So if you're trying to do something like this as well,
then the issue is with the order that your points are in.
In illustrator what I did to figure this out
was add a stroke with an arrow to my shape.
And this showed me where the starting
and ending point was of my shape.
So you want the start and end
of both of your shapes to be in the same place.
If I put one on this guy as well,
we've gotta see.
See how this shape,
which was my piece of the landing page,
the arrow is up here.
And in this shape my blob,
the arrow is up here.
So it means that the points are going in the same direction
and starting in the same place.
You also want your arrows
to be pointing the same way.
That was what was causing the flipping,
which was a big issue that I had to start out with.
Honestly, it was a bunch of trial and error
to get this right,
'cause people were suggesting a bunch of different things,
but you can make a compound path,
which you can then use this little attributes panel
to reverse the direction of the path.
And that's one way you can do it.
I also found myself having to go in
and delete a point and then re-edit
to just try and get the arrow
to end up in the right place.
I don't know.
However you get there,
you want the arrows to be in the same place
pointing the same way to do this morphing thing.
The pieces of the landing page,
I've got it here in my file a sub composition,
I don't know if that's the right word.
I mugged up this landing page and illustrator.
It's like a vector version
of one of our actual landing page templates
so that we have on ConvertKit.
And then I just animated each piece.
Some of it is done with masks,
like the background here,
for example, see these two key frames down here.
We've just got the mask animating over
and then everything else appearing in
and I would just pick up and move these pieces
to be up around about the time that I wanted them.
If you're wondering why these key frames look different
to these ones for example,
if I just move this up and show you.
I love [indistinct] Easy Ease,
it just makes things smoother.
In terms of the animation, I don't know.
I don't really know the difference
between a lot of this stuff,
but I just usually turn that on
and it ends up looking better.
I just gonna be honest there.
I basically just looked
at the finished landing page product and thought,
how do I want stuff to come in?
I decided I wanted this coming out from the side,
and I don't know if you can even see the dots
on this background,
but this is dot elements emerging from the sides
I don't want one of them to be slightly offset as well.
I didn't want anything to feel too perfect.
I think what you sudden in a way either.
One of my favorite tricks to do for animating something in,
if we'd look at how I've got these key frames set up here,
I start with it at a lower position
than what it's gonna end up at.
And I start with it at 0% opacity,
and then I have the opacity ending
at a 100 slightly before
the final position key frame ends.
And then you just get this nice light drifting
in kind of look where it appears,
fades in and moves up into place.
I think it's a really easy way
to get something animated and looking good.
For the form fields here,
I actually recorded my screen as I filled it,
typed into a landing page
and then just put a mask around them.
That's how I got them in there looking like this.
My cursor coming in here
is just a key frame animation again,
like starting a mom position
ending in another,
to make it look like the button was clicked.
I had the buttons scale go down slightly.
So you can see here these three key frames.
So the button scale goes down
to look like someone pressed it.
Then coming back over to the main animation file.
I had the image of Eric,
which had to be its own thing for the start.
And then this composition of the landing page building in,
they all move up together as this line extends out
from below and we'd go into the flow.
These are all vectors as well that I put in.
And this is in automation layers is it's another own file.
And this is like a longer file.
So it's not the same shape
as the final product ended up being.
So in this separate longer composition,
that was like the length of the whole
of my graphic, I suppose
is where I animated this little dot here,
coming down a blue line
and into the point in the automation.
And there was a few things that I did as part of this,
where I had the...
Foam up enough for you to see it.
The line extends and then the dot follows.
I just thought that was nicer
than the line being attached to the dot the whole way.
It just might feel like more stuff is happening.
I don't know.
And I also had the point
that it gets to when the dot touches it,
it looks like something happened.
My idea was that it was being filled up
by the action happening.
I don't know if that makes any sense.
(chuckles)
So we have it go down to the next one.
And then if I zoom in on this part here,
there's a yes, no part.
So here was where the little dot had
to make a choice of which way it was gonna go.
And so it follows along to the left-hand side.
And I managed to get to this dot following this exact path
again through using a mask.
So in illustrator, I had my shape.
This was my shape of the path here.
And I copied Command + C, copy the vector points.
Then I added it to a shape player,
which you can see up the top here.
It's not gonna look like anything.
That's not the point.
We just want to have the points in After Effects.
And sometimes when you paste it
and it doesn't go to the exact right point on the page,
so you have to move the shape player around
to get it right.
And I think how this worked,
it was a bit of trial and error for me, honestly,
was then I would just copy the mask,
like copy on that there,
and paste it onto the position transform option.
I didn't want to make it a mask on this shape,
I wanted to use the points
as a path for the position.
So I pasted it then,
and then you get this little thing happening,
which has a bunch of different points in between.
You can pick it up and drag the start
and end point to change the speed
at how it's going.
But I think each of these points
is like the point on my path.
And that's what makes it follow along,
which is really cool.
I could have moved it manually
to make it follow this,
but it was just a lot easier
to have the points already there,
and to make it do that.
So that was really cool.
I don't know if I explained that very well.
So I might leave a link to some videos
that helped me figure this out in the description.
We zoom we go down into this point,
which was the end of the automation part of things.
So back to this file.
So what I did then once I had that file
of the animation or happening
with the dot following down different paths
was put it into this frame this right size
of the video that it's gonna end up S.
And as you can see here,
I've animated the position of it.
So I just moved the position
so that the right thing was in frame at each time.
And sometimes that involves moving it along
when in this part here in particular,
when the dot goes to the left,
I wanted to move the thing here along.
And I chose to have this be very angled.
Like it was pfffoot pfffoot pfffoot.
(laughs)
Is the technical term for it,
rather than drifting itself away.
But these points the paths in After Effects,
it kind of vectors and illustrator
where there's handles
where you can make them curved if you want to,
for things to move in a bit more smooth way.
It's up to you.
The last thing that happened
on the animation file
was the dot getting to this point.
And then we start the email layers.
This is just a mask animating down.
I did the same thing here with the cursor,
like shrinking the email a little bit
to look like it had been pressed.
Look like it had been clicked.
Then the email mask expands down further
and I moved the automation layers
and the email layers at the same time,
just so it would end up being in the same place.
And usually how I do that is make a key frame
and then have both of them selected
and just move them both at the same time.
So that things happen together,
and you're not moving one
and then guessing where the other one should end up.
And then inside my email layers composition,
all that happens is the cursor coming in
and clicking on the lesson button,
which is the action that ends the whole animation.
To make it loop back round again as you saw,
we've got this image here of Eric inside that composition,
but I also have it up here
as the final top layer on my piece.
So I did the same mask morphing thing again,
there was two masks
I copied the points from one,
moved it to the other
so that it would morph between the two.
And again, I had to work with getting the sun
and points right.
It did take a little bit of finessing
to get this in exactly the right spot.
Like exactly overlaid with the email layers file.
So then all that happens is yeah,
that this moves and most back into a blob
and it loops back around again.
To get the looping feeling,
I had to make sure that I knew exactly
where the start point was
so that I could stop it at the end,
if that makes sense.
So, in this file here...
Let me go into it.
I have the static shot of Eric.
This is the one that ends up in the email.
Then we start the motion
and then another static shot.
And this is the one that ends up in the landing page.
So I put markers in here for where that start
and end of the motion was,
so that I could bring that through in here.
Then you just go in here
and I go markers update from source,
and it will show you any markers
that you've made in that previous file in here.
So as you can see at the start,
if I just go back to here,
it starts out at number two as the first frame
and we go over it
and that's when it starts to shrink down.
So at the end here I want the animation
to end on marker number two,
which is the exact marker where the animation started,
if that make sense.
That's why that isn't here
for me to know how to land up
and it takes the guesswork out of it.
So that is a look at how I did the animation.
I hope that some of that at least made sense.
Like I said,
I'm no motion design pro.
So a lot of this was just trial and error.
Having the idea for what I wanted it to do,
and then just trying things out
until I got it to do what I wanted.
But you can get pretty far I think, in After Effects
with just knowing basic key frame animation.
Like moving the position of one thing from here to here,
what you're scaling it at the same time
and understanding that,
you can actually get quite a bit done.
To end off I just want to show you
this very messy figure in my file,
which is where I was thinking through how it would work.
Initially only had two steps.
This is what this is showing here.
So I just had like did make like a storyboard, I suppose
of how it would start,
how it would float up to here
and then end on an email
that helped me think through it.
And then when I introduced this point as well,
these black boxes and me thinking,
that's like the frame
of what things will be in shot at each time
and laying it out like this helped me think about
what I needed that final file to be
in order to make it happen.
I tried to keep it very simple.
So this is like,
well, it looks very similar to our actual app UI.
It's a highly simplified version
because when things are moving around,
I wanted to make things clear enough that
yeah, people didn't have to take too long
to understand what was going on.
Just simplify it as simple as possible
and thinking through a way
that I could show our product in a really good light.
So taking people through an automation
to give a bit of behind the scenes look about
what happens when you sign up to a landing page
and how you end up being sent an email.
It was a really fun project to work on.
It's a little frustrating at times,
but I'm proud that I managed to figure out in the end.
So I hoped you enjoyed having this look
through my very messy file.
I'm sure there's many things
that I could have done differently.
And I'm sure that all the professional motion designers
can tell me about that down below in the comments,
but thanks for watching
and hope you got some ideas out of this,
and maybe it can encourage you as a designer
to step out of your comfort zone.
This was definitely a way out of my comfort zone
and not in my usual wheelhouse of things to do.
But I'm glad that I did it.
I learned a lot
and I've got something really cool out of it
to go on a home page.
So that's a win.
All right, thanks for being here.
Thanks for watching.
Hope you have a good week
and I'll see you in my next video.
Bye.
(bright upbeat music)