Skip to main content

How to Create Whiteboard Animation in Reallusion's Cartoon Animator 5 Tutorial - Concepts, Video, and Project Files

Whiteboard Marker Hand drawing a cat.
This animation technique allows the creation of
whiteboard animations inside Cartoon Animator 5
without having to create frame by frame animation
of your images being drawn
Something I've been thinking about for literal years is how to create whiteboard animations using Reallusion's Cartoon Animator to do the animation.

Specifically, looking for an easy way that doesn't involve any kind of frame by frame animation of images being drawn. Finally I think I've solved it with a technique that you can replicate.

The release of Cartoon Animator 5 gave us two new features, Spring Bones and Free Form Deformations (FFD), which have made it very possible to create your own, fairly convincing, whiteboard animations directly in the software itself.

Adding spring bones to the arm/hand prop, makes it look less stiff and more natural without having to do any extra work. While FFD makes it easy enough to 'reveal' whatever is being drawn with a little bit of sleight of hand (pun intended) trickery so you don't have to draw every line of your images.

Watch the Video Tutorial

(Also available to buy with project file and props included).

To show you my process I've created this 40 minute (approx) video tutorial in which I demonstrate  how I create and rig my hand prop, and how I animate writing text and drawing images in Cartoon Animator. If you don't have the time to watch right now I have broken down the basic concepts you need to know below the video.

Project files 

The Project Files and Props for Cartoon Animator, that were created in this tutorial, are available from my online store so you can study and use them in your own animations (personal and commercial use). You'll also be able to download this video and watch it offline whenever you want.

Key Concepts

The Hand Prop

Creating a hand prop is as simple as taking a photo of your own arm holding a marker on a plain but high contrast background - so it's easy to remove the background using any automatic background removal tool. I used a green screen background but I would recommend maybe a high contrast red as I had a lot of trouble getting rid of the green tint reflected onto my arm.

You also want to hold the marker so that the pen tip is not visible. It's much easier to hide that you're not drawing everything if people can't actually see the 'ink' coming out of the pen tip.

Rigged Marker Hand Prop in the Composer showing the Spring Bone Settings.
The fully rigged marker hand prop with three main
bones. Notice that the spring bones are only from
the wrist and use the 'Stiff' preset.
Once you have your transparent marker hand image drag it onto Cartoon Animator's stage and import it as a rigged prop. This will take you straight to the composer where you can resize the image and add your spring bones.

The Spring bones are key to making the animation look a little more natural. They cause the hand to move a little bit past the end of the line being drawn like a real person would when they lift the pen from the page. The best thing being, it just happens. You never have to think about animating it.

Animating Whiteboard Text

Animating the hand writing text is relatively easy if you're writing from left to right. For the most part you can use the hand to mask each letter as it is drawn. The viewer only sees each letter after it has been drawn, as the hand moves onto the next letter.

Using Cartoon Animator's Text Tool to manage written text appearing.
In the Text Editor create a line for each new
letter to switch to as it appears. Importantly,
use a hand written style font and make sure
each line is left justified.
Cartoon Animator's Text Tool is ideal for this. Importantly, choose a hand written font to further sell the idea that the text is really being drawn. Inside the Text Editor create a new line for each letter as it is added until you have the whole word, phrase, or sentence written on the last line.

Also important, the text should be left justified so it always lines up as you switch to the next letter.

Key frame the hand using the Prop Key editor and move the arm bone, making sure the pen lines up with the text for each key. 

You can pretty much trace the text the way it would be written. Place keys on the start and end points of each line. If a line is curved add an extra key for the mid point of a curve.

Animating Whiteboard Images

Animating images being drawn is a little more complex and I would recommend not using drawings that are too highly detailed as it spoils the illusion. Use images that you could reasonably imagine someone drawing relatively quickly with no underlying sketching/construction lines.

Once you have your complete image imported into Cartoon Animator as a prop you'll need  to plan how you're going to 'draw' the image and create shape masks (the same color as the whiteboard) to follow that sequence.

Masking the image with shapes.
Here I've used several rectangle shapes to
mask out my image. I've set the opacity to
70% so I can see the image beneath while
I key frame the reveal.
You could mask out the image with one single shape but I've found using several shapes over different areas of detail gives you more control over how the image is revealed.

While you could literally draw your image in any sequence, more like an actual human would draw the image, the fastest method, that still looks convincing, is to start in the top left corner and work your way down to the bottom right corner of the image.

This allows you to use less complicated masking and maximises how much you can use the hand to hide lines as they are 'drawn'.

I recommend only key framing the broad shapes, similar to how you key frame text. Key the start and end points of straight lines. For any curved lines, key a mid point for the curve.

How far apart you place the keys in the timeline depends on how fast you want the image to be drawn. I spaced mine every five frames.

Adding a Stutter Start transition to key frames near areas of detail.
By adding a 'Stutter Start' transition to key
frames near areas with more detail you can
imply more detail is being drawn as the 
stutter causes the spring bone to move
around more in these areas.
For areas that do have fine detail you want to just reveal the detail as the major shapes around them are being drawn. 

You can give a hint that the finer detail is being added, without actually key framing tracing the detail by adding in a ' Stutter Start' transition curve to each key frame in that area. This will cause the hand to bounce around a little more, activating the spring bones, making it look like more drawing of details is happening in that location than you've actually animated.

Using FFD to animate the mask shapes that reveal the image underneath.
Using the FFD editor to deform the mask
shapes out of the way. You can largely ignore
the editor window as you'll need to manually
move all the points around depending
upon your images.
Once you've key framed how the image will be drawn the next step is to key frame the mask shapes moving out the way as each area is being drawn. 

To do that open the FFD editor. You can literally ignore everything in the editor window as the only way to key frame the reveal is to manually move the individual points yourself, deforming the shape to reveal the next major line being drawn.

Through out the whole process of key framing I set the opacity of the arm and the masks to about 70% so I can see everything clearly as I work. Then I change the masks to the whiteboard color and set all the opacities back to 100%.

Final Thoughts

I will concede this is not the fastest way to create whiteboard animation. While I feel it does look great, it's very time consuming. Using this technique on an entire two to three minute explainer video could be quite monotonous.

If you're only ever making a whiteboard animation once in a while, it is good to know Cartoon Animator is more than capable. However, if you were making whiteboard videos regularly, I would definitely consider a dedicated whiteboard solution like Vyond or Doodly (not sponsored or an affiliate they're just two of the best). Neither of them have the nice spring bone touch in the wrist on their hands but they will save you a lot of time.

Click the link to purchase:
(Includes CTA5 Project File and Props)

Popular posts from this blog

Can You Learn Reallusion's Cartoon Animator 5 for Free Using Their 137 Official YouTube Video Tutorials Sorted Into a Logical Learning Order?

Or you could just buy The Lazy Animator Beginner's Guide to Cartoon Animator . While Reallusion's Cartoon Animator is one of the easiest 2D animation studios to get up and running with quickly, learning it from all of the official, free, video tutorials can be more overwhelming than helpful. With more than 137 videos totaling more than 28 and a half hours of tutorials, spread across three generations of the software (Cartoon Animator 3 through 5) it's hard to know if what you're learning is a current or legacy feature that you either need to know or can be skipped. Many of the official tutorials only teach specific features of the software and don't relate at all to previous or later tutorials. As a result there are many features either not mentioned or are hard to find. To make your learning easier, on this page, I've collected together all of the essential, official, free video tutorials and sorted them into a learning order that makes sense. Simply start at

AE Juice - Animation Presets, Motion Graphics, Templates, Transitions for After Effects, Premiere Pro, and Other Video Applications

Level up you video edits and animations with AE Juice's motion graphics and templates. Some days you just don't have the time to create flashy motion graphics for your latest video or animation. For some of us it's more a question of our own artistic abilities being a little less than the awesome we'd like them to be. Whatever reason a resource like AE Juice's animation presets, motion graphics, templates, and transitions packs for After Effects , Premiere Pro , and other video applications can really make your work stand out very quickly. AE Juice gives you access to an instant library of free, premade content elements and sound effects, which you can add to with additional purchases of various themed packs from their store. There are three ways to manage their content, all of which can be used in commercial projects . The AE Juice Standalone Package Manager makes it easy to browse previews of all your pack contents and to download and find just the elements yo

Artbreeder - Using AI created Character and Background Content in your Animations

A selection of User/AI generated images from Artbreeder. If you're looking for an endless supply of 2D character and background images for your animations then Artbreeder , an online Artificial Intelligence (AI) that generates image mash-ups you can tweak as much as you like, could be the ultimate content library. What is Artbreeder? Artbreeder is free to use though there are various paid plans, that give you additional features, such as higher resolution download images or more settings to play with. All images created on the site are Public Domain (CC0 License) and can be used in commercial projects. Using Artbreeder's online app you can generate head shot portraits, full body characters, landscapes, and other scenes simply by choosing two or more existing images to mash together then, using a series of sliders, to select which traits from each image you wish to lean toward in the final image. Photo Comparison - Top is my original uploaded photo. Bottom is Artbreeder's ap

Jarrad Wright, The Big Lez Show - Who Would've thought Animating with MS Paint Could Take You So Far?

A friend of mine recommended I should check out The Big Lez Show after I mentioned to him I make animations for living. He said the show's creator, Australian animator, Jarrad Wright , just makes episodes from his home using MS Paint. Somewhat shamefully I hadn't heard of The Big Lez Show, but the fact that it was being made with MS Paint absolutely hooked me into checking out. If you've never heard or seen the show then you, like I was, are probably thinking how good could it be? MS Paint has kind of a cult following of hardcore animators but no one would use it as their primary animation tool on a series, right? WARNING - before going any further, you need to know The Big Lez Show and its humor contains some pretty strong language. By strong I mean it's peppered very liberally with the 'F' and 'C' words and is very every day Aussie, blue collar speak. Unapologetically, all of that, is part of why it's so good. There's a good chance you've

Moho 14 Released - Still the Best 2D Animation Software for Indy Animators on a Budget

Moho 14 Released. Regular readers know I am a Reallusion, Cartoon Animator advocate through and through. Hands down I would recommend Cartoon Animator 5 first over Lost Marble's Moho 14 to anyone who is just starting in 2D animation, is a team of one, or just needs to animate as quickly as possible. However, feature for feature, Moho is, arguably, the best 2D animation software for the rest of us who can't justify a Toon Boom Harmony , or Adobe Creative Cloud subscription (and even with their applications Moho is very competitive on features). You can get started with Moho Debut for just USD$59.99 which is a cut down version of Moho Pro but it still has the most essential features needed for 2D animation. While Moho Pro is a whopping USD$399.99 (Cartoon Animator, which only has one version, is just USD$149.00) upgrades to new version numbers come down to a quarter of the price at USD$99.00. Even though Reallusion just released features like Motion Pilot Puppet Animation and

Reallusion Releases Cartoon Animator 5 - One Version, More Features, Lower Price!

If you're serious about producing 2D animation as quickly as possible, while still achieving professional results, Reallusion's Cartoon Animator 5 makes the most compelling case yet as your animation studio/tool of choice. Cartoon Animator's point of difference has always been its ease of use and accelerated workflow. Creating fast, 2D animation using puppet, bone rigged based characters and props, on a stage with 3D depth for easy scene parallax effects. As it has developed Reallusion has incorporated more advanced features like motion capture for both face and body as well as being able to export scenes to post production tools like After Effects with the addition of plugins. After moving away from Flash based vector image support for a few years, Reallusion is back with full .SVG (scalable vector graphics) support for resolution independent graphics. They've also added Spring Dynamic physics and Full Form Deformation tools, both of which make it ridiculously easy t

Cartoon Animator 5 and G2 Characters - Why You'll Probably Never Use Them Even Though They're Great

Since I've previously covered how to get the most out of your purchased G3 and G1 characters for Reallusion's Cartoon Animator 5, it would be remiss of me not to look at the greatest character rig of all time, G2 characters. G2 Characters have been mostly relegated to legacy status since Cartoon Animator 3 but, as a rig that let you create fully 360 degree turn-able characters that moved in 3D space, animated with 3D motion files, and were mostly vector based, there was nothing else like them in any other 2D  software. The problem was, even with the templates provided by Reallusion for both Adobe Flash and Serif DrawPlus , they were complex and time consuming to make from scratch. They were also difficult to customize because there was no way to export and edit individual parts. G2 characters just weren't easy enough for the casual Cartoon Animator user to customize so they fell by the wayside. However they're still fully supported in CA5 with all the same functional