Jan 30
Integrating Hand-Drawn Animation with Motion Design
This is Part 3 in the series “How I Made This Animation” where I take apart the process of animating a scene from my latest commercial brand video for Paradime.io
Hey, welcome back!
Last time we talked about all the boring stuff, of how to set up the huge level scene in After Effects and make the camera follow the scene in a way we like. And getting FIGMA to work with After Effects.
But this time we get to the awesome part of hand-drawn animation!
Awesome, and tedious. Both things don’t seem to go together. But if you are an animator, you love that stuff! Meditation with a pen. Like the soreness after an exhausting workout the next day that gives you the sweet remembrance that you did something for your mind and body.
Yep, sold it. Let’s jump in!
Designing the Character
I’ll be honest. I did not have a lot of time to design the character. I basically just spend one page on ideating the character. Since the data engineering and analytics world very often seems to be a male-dominated field I decided to go for a female character.
When I need quick inspiration I usually go to Pinterest. There I already have a board with character design inspirations that I collect whenever I browse.
I also like to find inspiration for the clothing of my characters with the help of Pinterest. At first, I kind of wanted to go with a jumpsuit look. It’s the green one in the sketches above. Something reminiscent of Mario, and something an engineer would wear.
But then I went into more of a business casual look, thinking, there are so many engineer stereotypes, but an engineer can wear stylish things, too. These were my inspirations:
In the end, I went for this design:
Now it was time to animate some running!
Animating the Run
What I Use to Animate by Hand
For animating by hand I love to use RoughAnimator. It’s convenient in many ways.
First of all, it’s on my iPad, so I don’t even need to boot up my PC and start up a heavy application like Adobe Animate. The quick access makes me pick it up more often than any other app for animation.
Second, it’s quite minimal. It has all the things you would need to produce hand-drawn animation, and almost no additional fancy features. The interface is easy to learn, you are only limited by your ideas and animation skills. Maybe not an app to finish a full-feature film, but definitely a good app to animate individual scenes and assets. This brings me to the third point.
It has a good export system that integrates perfectly with After Effects. Or any other video or animation program. You can simply export animations as a PNG sequence, a GIF, or an h264 video. But best of all, there is a plugin that allows you to import RoughAnimator folders directly into After Effects and preserves all the layers!
The Process
So for this scene, I needed to draw 2 character animations.
- Running
- Jumping (and falling back down)
I am the master of running animations so that’s what I started with.
As always I do a rough draft of the action. Sometimes I use a reference, and sometimes I just do it from my memory. Something like a walk or run cycle I have already done over a hundred times and can draw it in my sleep.
Once the sketch version is done, I try to fit it with the character design that I created above. I am doing a second rough animation, to get familiar with the character and get something even closer to the proportions I need.
At this point, I have the reference pretty much next to my drawing at all times.
Also, as you see, I sketched in the body first, and then added the clothes moving and the hair.
The hair and clothes are both considered “secondary” movement. It means they are mostly reacting to the movement of the body. Once you have the body in place, it is easier to add them.
Hand-drawn animation is a very meticulous step-by-step process. But it’s fun if that’s something you enjoy. It is nice to bring something to life with your own brush strokes. A thing that starts as a stick figure and ends up being a little character with its own motivation and drive.
At this step, I introduced a slight change to the posture of her running. In the sketch version the head was leaning forward. I realized it looks much better when she is running more upright. I also looked at Super Mario to see how he is running in his game. His run is much simpler with way less poses, but he also runs pretty upright.
After this, there is the final step where I again redraw everything with clean lines and add color.
That’s also when I separate everything onto their own layers based on how it is overlapping each other.
I ended up with 10 layers for the final animation, because I separated the lines, the color, the pants. the hair and so on. It allows for the most flexibility in case I want to change the color of something specific in the future.
Quite interesting how such a simple animation can have so many layers. The great thing is that RoughAnimator allows for an almost infinite amount of layers, as long as your iPad can handle it.
And here’s the final running animation:
The Jump
I followed the same process for the jump!
I started with a simple stick figure draft…
…and then had a cleanup step where I drew her body and clothes, and a final step where I separated the layers and did the final clean lines and color. I ended up with this jump and fall animation:
Love it! After a whole day spent on this, I was happy with the result and ready to see it in action.
Now it was time to ZIP those project files up and send them over to my working machine to assemble the scene in After Effects.
Integrating with After Effects
First things first, I imported the RoughAnimator folder with the importer script. I created three compositions that I would use in sequence for this scene:
- a running loop,
- a jump UP that holds the last jumping pose
- a falling DOWN that holds the last falling pose
The two hold poses are needed because all the jumps had different lengths. Sometimes they need to be longer and sometimes shorter. If it’s longer than the corresponding animations it would just keep the HOLD pose, but continue to move on the x and y-axis.
The running loop is great in the way that I only have to animate one cycle and can easily loop it infinitely. I use that technique a lot when combining hand-drawn animation with After Effects. So often, in fact, that I wrote my own script to make this workflow nicer — EasyLoop for After Effects.
Next, I added those 3 animations to the LEVEL composition I built in part 2. And parented them all to the little placeholder circle that determined the running and jumping path of the character!
Whenever the character was running in a straight line I would show the running, and on every jump the jumping part, and after the peak of the jump it would switch to the falling animation.
I would use different colors for the layers to see at a glance what’s happening.
First, I did a rough pass of the scene and just aligned all the jumps and runs. After that, I go in and fine-tune the positions and the timing of each instance to actually touch the ground when running and jumping.
I would take extra care that the feet would not slide unnaturally with the automatic position tweening.
So now I am at this point.
All the general elements are in place to make it work. But now let’s elevate it to the next level!
It’s time to get to the fun part — the juice ✨!
And that will be coming up in the last part.
PART 4 — Elevating your semi-finished animation to a god-like status that makes your eyes melt out of joy by adding the magic juice to it. 👇
If you don’t wanna miss it SUBSCRIBE here and give claps, and likes, and all those things to make me an overnight viral success on this platform.
See you soon!
