So, I was blown away with the response to my previous post on CodePen. It seems there is an audience for these beginner level topics, and I am more than happy to share.


My first job in advertising was to make a lot of Flash banners for various brands. I had learned how to use Flash itself in college, and that combined with my design skills is what landed me the position. However, I knew almost nothing about motion design.

Luckily for me, my boss was an old school Flash guy who had been animating for years and was very good at motion graphics. These are the first three things he taught me about easing.

1. Moving something in to the stage? Use ease-out

2. Moving something off the stage? Use ease-in

2. Moving something from one point in the stage to another? Use ease-in-out

These three little tips got me by until I got a proper 'feel' for motion. And there is good reason too. When we are animating we want to eliminate sudden 'stops' in our motion1. By using ease correctly, we can give our work that 'smooth' feeling that makes your audience be like:

woah

Get intimate with your eases

In my line of work, easing is serious business. At Active Theory we will analyse every bit of motion in our work, sometimes trying a bunch of different combinations of eases until we are 100% happy with it. It goes with out saying, the more you move stuff around on the screen, the better you get at it. Go to Easings.net and give all of those eases a try. When you are ready to level up you can even create your own ease with resources like cubic-bezier.com.


If you enjoyed this post, leave a comment below! Or you can hit me up on Twitter

1 There are situations when we want movement to stop abruptly, like mimicking an object hitting a wall, for example. Generally speaking, smooth movement is the way to go.


10,368 14 107