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

Guido Rosso
Jan 1, 2019 · 7 min read

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.

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:

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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).

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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!

Rive

News, tips, and insights on our real-time animation tools.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store