Animation with Physics

While Famo.us’ easing curves library makes it easy to create smooth, natural-feeling animations, we can do even more. Famo.us also comes with physics-based transitions that you can use to build animations modeled after motion in the real world.

(Note that Famo.us also includes a full physics engine that you can use to create even more complex behavior. While the physics transitions shown here are fun and easy to use, using the physics engine directly brings even more power and flexibility.)

SpringTransition

The SpringTransition transitionable gives, as you might expect, a springy animation effect when a renderable is changed from one state to another. (Although it’s most common to use this transition when changing an element’s position, you can use it to change an element’s opacity, scale, etc.) We use a SpringTransition instance just as we would use a basic Transitionable, but giving it two special options, dampingRatio and period.

A high dampingRatio dimishes the bouncyness of the spring
The period represents the time it takes the spring to complete one “bounce”

// @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 Transform = famous.core.Transform;
var SpringTransition = famous.transitions.SpringTransition;

var context = Engine.createContext();

var springTransition = new SpringTransition([0, 0, 0]);

moveOut();

function moveOut() {
    springTransition.set([50, 50, 0], {
        dampingRatio: 0.3,
        period: 1000
    }, moveBack);
}

function moveBack() {
    springTransition.set([-50, -50, 0], {
        dampingRatio: 0.3,
        period: 1000
    }, moveOut);
}

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

modifier.transformFrom(function() {
    var translation = springTransition.get();
    return Transform.translate(translation[0], translation[1], translation[2]);
});

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

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

Gotcha! Duration vs. settling

In the example above, you may notice that we don’t pass a duration value to the .set() method of the SpringTransition. This is because, unlike standard transitionables, the ending state is not determined by a fixed duration, but by physics calculations that determine whether the element has fully settled (is asleep).

That is, the SpringTransition transition callbacks fire whenever the physics engine determines that the spring has stopped moving. This is also true of the SnapTransition.

SnapTransition

The SnapTransition []3transitionable is similar to the SpringTransition, but much faster and with additional damping — think of a rubber band being stretched out and then suddenly released. The SnapTransition comes to rest (settles) much faster than the SpringTransition.

// @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 Transform = famous.core.Transform;
var SnapTransition = famous.transitions.SnapTransition;

var context = Engine.createContext();

var snapTransition = new SnapTransition([0, 0, 0]);

moveOut();

function moveOut() {
    snapTransition.set([50, 50, 0], {
        period: 200,
        dampingRatio: 0.1
    }, moveBack);
}

function moveBack() {
    snapTransition.set([-50, -50, 0], {
        period: 200,
        dampingRatio: 0.1
    }, moveOut);
}

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

modifier.transformFrom(function() {
    var translation = snapTransition.get();
    return Transform.translate(translation[0], translation[1], translation[2]);
});

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

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

Next: Adding interaction »