Easing functions

June 25, 2020 2:37 PM

Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. This page helps you choose the right easing function.
posted by Foci for Analysis (12 comments total)

This is excellent. I tend towards "easeInOutQuint" and the very similar "easeInOutCirc" as my favorite motion types for infographics and titles.
posted by bz at 2:49 PM on June 25, 2020 [1 favorite]

I think my favorite is "easeInOutBack" because it most accurately reproduces cartoon physics.
posted by Faint of Butt at 3:21 PM on June 25, 2020 [2 favorites]

It's easing to plot a curve
To plot a curve that aptly swerves
It's easing
It's easing (easing) easing (easing)
posted by cortex at 3:21 PM on June 25, 2020 [10 favorites]

Neat! This is one of those things I've never thought of and probably never would -- neither the idea of making this kind of taxonomy or graphing it this way -- but is completely clear and obvious as soon as you see it. After the first few, I liked trying to imagine the motion from the graph before mousing over it. Really nicely laid out too. Thanks, Foci for Analysis!
posted by straight at 3:56 PM on June 25, 2020 [2 favorites]

Hooray for acceleration and jerk limits. Getting them right can make a huge difference on moving machinery.
posted by TheJoven at 4:08 PM on June 25, 2020 [3 favorites]

Jerk limits make a huge difference in social machinery, too.
posted by phooky at 4:31 PM on June 25, 2020 [22 favorites]

posted by Foci for Analysis

Epon-ish-sterical
posted by Going To Maine at 5:26 PM on June 25, 2020 [3 favorites]

I think my favorite is "easeInOutBack" because it most accurately reproduces cartoon physics.

Great observation! I'm thinking Roadrunner and Coyote.
posted by JackFlash at 6:51 PM on June 25, 2020 [2 favorites]

As someone working on some animations, this is oddly timely.

And oddly soothing.
posted by Zargon X at 7:00 PM on June 25, 2020 [1 favorite]

You can model pretty much everything except the bottom row, with a cubic spline. I provide a 4-parameter custom Hermite function to my designers. We used to use a 2-parameter one, but whatever you do it's never enough. Didn't use ease at all at the start, but a friendly animator clued me in, and then I couldn't not see it.
posted by inpHilltr8r at 7:34 PM on June 25, 2020 [1 favorite]

I thinking would be cool to link pitched sound to these motions.
posted by bonobothegreat at 7:42 AM on June 26, 2020 [3 favorites]

I think my favorite is "easeInOutBack" because it most accurately reproduces cartoon physics.

I once asked an animator about this exact function. Specifically as it relates to cartoon cars moving slightly backward before speeding forward from a stop. They explained that, if they animated it realistically (i.e. the car going forward immediately with no initial bump backward) it isn't perceived as "real" or believable by the viewer. Why this was, they couldn't really articulate, other than to say that's just how the mind works.
posted by Thorzdad at 5:35 AM on June 27, 2020 [1 favorite]