Easing Curves

In the section on tweening, we learned how to use transitionables to move elements smoothy from one state to another. But all of the animation examples shown in that section suffered from a certain degree of rigidity — the elements all transitioned at an unnatural-looking constant rate, and then just stopped.

The solution for making transition animations feel more natural is easing curves. Easing curves are functions that describe changes in the rate of transition over time. With these functions, we can even model real-world effects like springyness and bouncyness. First, let’s look at the easing curves that are available with Famo.us, and then we’ll look at ways to use them.

30 easing curves included

The Famo.us library comes with 30 different easing curves included. Here they are, with the graph of their functions and a simple demo to illustrate the effect they produce.

Name	Graph	Demo
inQuad
outQuad
inOutQuad
inCubic
outCubic
inOutCubic
inQuart
outQuart
inOutQuart
inQuint
outQuint
inOutQuint
inSine
outSine
inOutSine
inExpo
outExpo
inOutExpo
inCirc
outCirc
inOutCirc
inElastic
outElastic
inOutElastic
inBack
outBack
inOutBack
inBounce
outBounce
inOutBounce

All easing curve functions are available a properties on the Easing module:

var Easing = famous.transitions.Easing;
Easing.inBounce
Easing.inOutElastic
Easing.inExpo
// etc.

Using easing curves with a Transitionable

To use an easing curve with an instance of Transitionable (see the section on transitionables), we set the curve property of the transition object (the second argument to the .set() method).

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var Modifier = famous.core.Modifier;
var Transitionable = famous.transitions.Transitionable;
var Easing = famous.transitions.Easing;

var context = Engine.createContext();

var transitionable = new Transitionable([0, 0]);

transitionable.set([.5, .5], {
    duration: 1000,

    // We can set the easing curve via the
    // transition object's `curve` property.
    // You can set the function itself, or
    // the string name of the function.
    curve: Easing.inOutExpo
});

var modifier = new Modifier({
    size: [100, 100],
    origin: [0, 0],
    align: [0, 0]
});

modifier.alignFrom(function() {
    return transitionable.get();
});

var surface = new Surface({
    properties: {
        backgroundColor: '#fa5c4f'
    }
});

context.add(modifier).add(surface);

Using easing curves with a StateModifier

To use an easing curve with an instance of StateModifier (see the section on state modifiers), we set the curve property of the transition object (the second argument to the setter method).

// @famous-block
// @famous-block-option preset famous-0.3.0-globals
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var StateModifier = famous.modifiers.StateModifier;
var Easing = famous.transitions.Easing;

var context = Engine.createContext();

var stateModifier = new StateModifier({
    size: [100, 100],
    origin: [0, 0],
    align: [0, 0]
});

stateModifier.setAlign([0.5, 0.5], {
    duration: 2000,
    curve: Easing.inOutBounce
});

var surface = new Surface({
    properties: {
        backgroundColor: '#fa5c4f'
    }
});

context.add(stateModifier).add(surface);

Writing your own easing curve

You aren’t limited to the 30 easing curves included in Famo.us by default. You can also write your own! An easing curve is just a function that takes a single argument for time (a value between 0.0 and 1.0) and which returns a value between 0.0 and 1.0. Example:

function myEasingCurve(time) {
    return time; // Pretty boring!
}

Next: Animation with Physics »