Easing Functions Cheat Sheet | Hacker News Reader

Easing Functions Cheat Sheet

easings.net

122 pointsbpierre27 comments

These are really interesting and I never realized that there are so many of them. Railways use "easements" to guide trains in and out of curves, so rather than just changing from straight track to the radius of the curve, there's a section that approaches the radius. If the train is making a right angle turn, it will do somewhere around 85 degrees of that turn at the expected radius.

Very interesting! For anyone else that's curious, I found a Wikipedia article [0] with more information. It turns out that an "easement" can also be a right to use land that you don't own for things like roads and structural support [1], so it took a minute or two before I found it.

[0]: http://en.wikipedia.org/wiki/Track_transition_curve

[1]: http://en.wikipedia.org/wiki/Easement

One more link: http://en.wikipedia.org/wiki/Cant_(road/rail)#Rail

Cars and bikes do that, too. You don't instantaneously go from 'axles parallel to each other' to 'constant angle A between front and rear axles'. Instead, you go from 'not turning the axles' to 'turning it at constant speed' to 'keeping it at a fixed angle' and back.

That's why road exits and a cloverleaf interchanges should never use perfect circle arcs to connect straight road parts. The curvature of the road should change continuously such as in various splines or parts of superellipses (http://en.wikipedia.org/wiki/Superellipse). An Euler spiral (http://en.wikipedia.org/wiki/Transition_curve) is optimal, but for cars, small deviations from the optimal aren't as bad as for railway cars.

Though on a bike, you can lean to turn if you're going the right speed. The turn is made because you're riding on the sides of the tires which will give way to the side you're leaning towards.

Also worth checking out http://cubic-bezier.com/

Great stuff. It would be super useful if a mathematical definition of the easing was provided though (unless I'm missing something on my mobile browser).

You can check out code samples in a bunch of different languages here: http://www.robertpenner.com/easing/

Funny note: That site and code has been around since the early Actionscript 2 days, and I went to hunt it down as a reply to ledneb. It looks like easing.net might actually be by the same guy ;)

Agreed. This seems highly focused on web development, showing the CSS and jQuery function calls, but it could potentially be very useful for other things, like games, or animations in desktop applications.

I'm thinking of ramp-in / ramp-out for load simulations.

This x100. Show the actual equations no it can be useful for many more things.

Very neat! Would be good to show the formula and/or code on the ease-function details page too.

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

The plugin the author talking about and used is linked. Most of these can be described as variations on a handful of core functions: logarithmic, s-curve (logistic), and exponential. The stranger ones like the elastics aren't done with straight math formulas, or they're piecewise.

There is one function i looked for and couldn't find. It would be easeInOutCirc, but instead of being a combination of first easeInCirc, then easeOutCirc, it would be the opposite: First easeOutCirc, going into easeInCirc.

These should fairly easy to combine just being js functions. It's a jQuery plugin:

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

Okay, thats pretty neat, but whats with the auto translation?

  Vælg easing for at se beskrivelsen sammen med en Bezier kurve.
  div {
     -webkit-transition: all 600ms easing funktionens Bezier kurve;
     transition:         all 600ms easing funktionens Bezier kurve; }

It hurts my brain, expecting to read english, then encountering danish with english mixed in.

This is exactly what we've been needing and been thinking about putting together for some time. Thanks for saving us the time!

Is this purely for visuals? I'd like to use this to balance a game. EG: easeInQuad is a good graph shape for xp needed to level. But I can't tell if this can be used for that. Maybe if there were some examples of that function they always stub out it'd be easier to know.

I think these curves are meant only for animations. For game logic curves, you should choose an elementary function (https://en.wikipedia.org/wiki/List_of_mathematical_functions...) that fits your curve best and implement the math yourself. For an EXP-needed-to-level function, it would be simplest to implement an eponential curve (https://en.wikipedia.org/wiki/Exponential_growth) of the form c⋅b^x. In your game, that would be (initial_exp ⋅ (growth_rate ^ level_number)). Or you could implement the quartic function (https://en.wikipedia.org/wiki/Quartic_function), which represents the easeInQuad curve you liked on the web page.

Thanks for the info. Yeah, I've already done that. I was just wondering if this could be used as an alternative. Since it can't be... what's the purpose of this library?

It's for CSS. That's why it's all just impressionistic graphs instead of numbers and equations; "impression" is exactly what these will be used for.

One of these days I'm going to translate Michael Herf's friction function to JS: http://stereopsis.com/stopping/

I love the page. I was kind of hoping the transition to the function page used the easing that I selected, though.

No animation for the linear evolution :(

Love your idea and responsive design.

I never realized that simple graph functions can translate to animations... mind.. blown.

A great illustration of why OOP style of development is wrong.

Reply on news.ycombinator.com