With an industry as open as a wideout on a post route against the Packers, there’s no better time to get in the (digital signage) game. Whether you’re a seasoned veteran or rookie ready to make your mark, Screenfeed’s own Coach Content has your back with a quick tip—how to harness the power and polish of ANIMATION EASING.
“But Coach—I’m not an animator.”
Sorry, Charlie, that doesn’t mean you get to sit this one out. Anyone can look at a piece of content and say it looks ‘nice’ or ‘not-quite-right.’
Big whoop.
Today’s quick tip will give you the eye and language to take you from the ranks of the peanut gallery to the starting lineup by offering more concrete (aka VALUABLE) feedback on the content running on your screens.
Now drop and give me 20, then read on.
It’s common knowledge that when it comes to capturing attention, motion nearly always wins over static. Just like design quality however, motion done well vs. motion done poorly can mean the difference between keeping or losing that hard-earned attention. The good news is—good motion can generally be boiled down to one key factor: EASING.
Easing is the term used in the animation world to describe the speed-change an animated object (image, text, shape, etc.) experiences from the time it moves from point A to point B.
When an animation starts quickly and ends slowly, it’s called an ease-OUT. When it starts slowly and ends quickly, it’s called an ease-IN.
Ease Out & Ease In. Remember that, K?
I’ll just say it straight up—objects moving without an ease-out or ease-in, look stiff and awkward. Like middle school slow-dance stiff and awkward. That’s because almost nothing in the natural world moves like that. Think of driving a car. Imagine the jarring feel if you started and stopped with that sort of instant change. Call the trainer and grab an ice pack.
Adding eases to an object’s movement feels better because it ascribes some amount of inertia to the object, which is the way things work around us every day. That is, heavy things generally take longer to get moving and then stop than lighter things do.
So - the amount of easing you see happening on-screen communicates weight, meaning, and ‘feel’ on its own level!
Wait, what?
Let's take a look.
None—stiff, feels cheap.
A lot—towards cartoony, it'll get noticed, but will either really fit or really clash.
Just a bit—less noticeable, but blends in, ‘nice.’
Imagine the last motion-based digital signage you saw, and think about how it FELT. Was it sophisticated? Soothing? Fun? Frenetic?
Now think about the movement of its on-screen elements. How did the way they eased in and out contribute to that FEEL?
Finally, as with any sort of design principle (motion design included), choosing to break the ‘rule’ may actually have a place when the content objective calls for it. As mentioned earlier, the absence of easing makes for a visually jarring look (see car analogy). In the right environment, ‘jarring’ turns heads and makes a statement (I’m looking at you, pump-top energy drink ad).
The bottom line is animation and motion design are just as loaded with creative choices as the visual elements they affect—they’ll either help or harm your overall goal. Now that you’ve beefed up your playbook by knowing how to recognize it, call it out and help ensure your animated content looks the best it can be.
Now get out there and win over that audience of yours!
Again, be smart about it though, gang.
Flow script for After Effects | Not only supplies a great selection of pre-fab'd motion eases for animators, but it also allows your motion designer to share the code version of the easing curve with developers - extremely helpful if you're involved with creating animation in html!
Easing ‘Cheat Sheet’ for devs | If you're really looking to dive deeper into the world of easing, this site offers a helpful rundown of the most commonly-used eases, or motion curves, complete with their names. Warning - approaching geek territory here. Otherwise, it's a helpful resource for your dev or design team to check out if they haven't already.
Ease Visualizer, again for devs | Similar to the Cheat Sheet, but doubly-helpful as this site features a nice UI that demonstrates the look and math behind these common eases, along with the code powering them.
