
Easing Functions Cheat Sheet - bpierre
http://easings.net/
======
smoyer
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.

~~~
peter_l_downs
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](http://en.wikipedia.org/wiki/Track_transition_curve)

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

~~~
peter_l_downs
One more link:
[http://en.wikipedia.org/wiki/Cant_(road/rail)#Rail](http://en.wikipedia.org/wiki/Cant_\(road/rail\)#Rail)

------
cleverjake
Also worth checking out [http://cubic-bezier.com/](http://cubic-bezier.com/)

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

~~~
Kronopath
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.

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

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

~~~
rtkwe
[http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js](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.

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

~~~
rtkwe
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](http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js)

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

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

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

~~~
roryokane
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...](https://en.wikipedia.org/wiki/List_of_mathematical_functions#Elementary_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](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](https://en.wikipedia.org/wiki/Quartic_function)),
which represents the easeInQuad curve you liked on the web page.

~~~
tieTYT
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?

~~~
jerf
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.

------
jonah
One of these days I'm going to translate Michael Herf's friction function to
JS: [http://stereopsis.com/stopping/](http://stereopsis.com/stopping/)

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

------
gohrt
No animation for the linear evolution :(

------
walid
Love your idea and responsive design.

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

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

