Using the Principles of Animation in Flare to Animate a Bouncing Ball (Part 1)

I posted the GIF below on Twitter a few days ago. I found it on Google Images while searching for educational demonstrations of easing curves (I was writing the animation section of our Flare manual).

Turns out this GIF is from a blog post on Greyscalegorilla. It’s for a class called Motion Design 101, which they sell on their site. It’s targeted to After Effects users and motion graphics artists, but I’m sure a lot of the concepts apply to any animation software.

In the same blog post, they include a great YouTube video on Disney’s 12 principles of animation (which is what they based the class off of). Some of these are more relevant to traditional hand-drawn 2D animation, but again, the concepts can be applied to modern animation software like Flare. If you haven’t checked that out, definitely don’t miss it.

Disney’s 12 principles of animation.

Anyway, the tweet got a lot of likes, and one user asked if they could get access to a Flare file that has all of these animations. So that inspired me to do a tutorial on how to create a bouncing ball in Flare while applying some of these principles. I’ll share each iteration as a public file, so you can easily follow the entire progression.

Keep in mind that not all of your animations need to use all of these principles. Sometimes you might just use one or two. A lot of animators don’t even know they’re using them. I started animating without any formal design or animation training, and I found myself naturally using these as I tried to intuitively understand what makes animations look good. However, you’ll be much better off knowing them. If you ever feel like your animation isn’t quite right, or maybe it’s lacking something, come back to the principles.

Here’s what we’re going to build in the first part of this tutorial:

This is what we’re going to create in the first part of this tutorial.

We’re going to cover timing, spacing, easing, exaggeration, mass, and weight. In a follow-up tutorial, we’ll use anticipation, arcs, squash, and stretch to make this animation even better.

Setup

Start by creating an ellipse. Click on the Create Tools menu or press “o” to select the ellipse tool, then hold shift while dragging to force the height and width to be the same.

Create Tools

I gave mine a width and height of 150 pixels. Then press “u” to create a rectangle for the floor. I made mine 800 pixels wide and 2 pixels high. I also gave them a solid fill (I used #AAAAAA) and no stroke.

We need to do one last thing before we can start animating, and that’s to group our ellipse into a new node. You can do this by selecting the ellipse and pressing Cmd + G on a Mac, or Ctrl + G on Windows. This node gives us an extra transform space on top of the ball. We want to move the node down so it aligns with the floor. This is going to allow us to rotate and scale the ball from the floor rather than from its center point. By the way, I renamed my node to Ball to keep things clean (double-click on it in the hierarchy to rename it).

Group your ellipse into a new node. Rename it to Ball to keep your hierarchy tidy.

Since the ellipse is now grouped under the node, moving the node will also move the ellipse. You could move the node down then move the ball back up, but we can make our life easier by using the Freeze function. Set Freeze to Both and now you can move any object on the stage and its children will remain in their current positions. Remember to set Freeze back to None when you’re done. You can now scale and rotate the ball relative to the floor. This will save us having to do some re-work in part 2 of this tutorial when we add squash and stretch.

Use the Freeze function to move objects without affecting the position of their children.

Animation

Switch to animate mode and let’s add some keys to get a basic bounce going. With your Ball node selected, click the key icon next to Position Y to set a key at the very start of our animation.

Now move to frame thirty (you can hit Cmd + Shift + Right Arrow Key to jump 10 frames to the right; press it 3 times to jump 30 frames). Move the ball up on its Y axis to create the first jump.

Create the first bounce.

Now add another key at frame 60. You can copy and paste the key from the first frame since we want the ball to go back to the exact same position.

Create the second and third bounces.

Now create two more bounces exactly the same way, but make each one a bit faster (so the frames are closer together) and don’t move the ball as high up in the air. You don’t need to be super mathematical with this. In general with animation, we want to focus on making things look and feel good, rather than physically perfect. In fact, you’ll often want to break the laws of physics to make things feel more playful and exaggerated.

Basic bounce. Notice that I turned on the Work Area and Loop.

Alright, we now have a basic bounce. It doesn’t look great yet, and that’s because we haven’t added any easing.

Easing

To make our bounce look more realistic, we need to make it feel like the ball is being affected by gravity. That means that the ball should gradually slow down as it’s reaching the top of its bounce, and speed up as it’s falling back to the floor. To accomplish that, we’re going to customize the interpolation between the keys.

Use CMD (on Mac) or Ctrl (on PC) to select only the first, third, and fifth keys. These are all the keys when the ball is on the floor, except for the last one. We’re not going to mess with the interpolation of the last key because there’s no key after it. If you read the interpolation section of the Flare Manual, you’ll remember that interpolation only affects the frames between the selected key and the next one.

Select the keys on the floor and set them to ease-out.

Set the interpolation to cubic and move the first handle all the way to the left. This is called an ease-out, and it means that the ball will start fast and decelerate as it approaches the next key.

Now do the opposite for the keys when the ball is in the air. Set them to ease-in, meaning that the ball will start slow and accelerate as it approaches the floor.

Select the keys in the air and set them to ease-in.

Here’s how the animation looks with easing now. It’s an improvement, but we can exaggerate the easing to make it look even better.

Simple bounce with ease-in and ease-out.

Use the handles in the Key Interpolation pane to exaggerate the ease-in and ease-out of all your frames.

Exaggerate the ease-in and ease-out.

Here’s the ball bounce with exaggerated easing. It might not be 100% physically correct, but the important thing is how it looks and feels. You can play around with different timings and easing curves until it feels great. I moved my second and third bounce keys closer together, as those parts were feeling a bit slow.

Ball bounce with exaggerated easing and tightened up timing.

Take a look at my Flare file, and feel free to fork it!

Mass and Weight

By modifying the timing of your keys, the height of each bounce, and the exaggeration of your easing, you can create heavier or lighter objects.

Take a look at this fork of my Flare file to see what a difference this makes.

Change your timing, spacing, and easing to create different feelings of mass and weight.

Stay tuned for the next part of this tutorial, which will make our bounce animation a lot more interesting using anticipation, arcs, squash, and stretch!