Animator.tweenElement('element-id', 300, {
    opacity: 0,
    transform: {
        translate3d: [0, '50%', 0]
    }
}, function(){
    console.log('This method will be fired at the end of the tween');
});

// Creates the animation - each key must be digit like,
// and it represents a percentage of the animation.
// We named the animation 'pop', so it can be referenced later
Animator.createAnimation('pop', {
    '0': {
        backgroundColor: {
            rgba: [255,0,0,1]
        },
        transform: {
            scale: [0, 0],
        },
        _timing: 'ease-out'
    },
    '40': {
        backgroundColor: {
            rgba: [0,0,0,1]
        },
        transform: {
            scale: [1.07, 1.07],
        },
        _timing: 'ease-in-out',
        _onFrame: function(){
            console.log('This method will be fired at 40% of the way through the animation');
        }
    },
    '65': {
        transform: {
            scale: [0.98, 0.98],
        },
        _timing: 'ease-in-out'
    },
    '100': {
        transform: {
            scale: [1, 1],
        },
        _timing: 'ease-in-out'
    }
});

// We tell animator to fire the 'pop' animation we just defined
// with a duration of 1 second
Animator.animateElement('element-id', 'pop', 1000)

// This animation will start taking place immediately
var queue = Animator.tweenElement('element-id', 300, {
    opacity: 0,
    transform: {
        translate3d: [0, '50%', 0]
    }
}, function(){
    console.log('This method will be fired at the end of the tween');
});

// This will force the animation to wait 300ms after the animation above
queue.addDelay(300);

// This tween will take place after the 300ms delay above
queue.addTween('element-id', 300, {
    opacity: 1,
    transform: {
        translate3d: [0, '0%', 0]
    }
})

var queue = new Animator.Queue();

queue.addTween('element-id', 300, {
    height: 20
});

queue.addTween('element-id', 300, {
    opacity: 0
});

queue.addTween('element-id', 300, {
    opacity: 1,
    height: 300
});

// Starts the animation queue, can be called whenever
queue.start();

var target = {
    x: 0,
    y: 0
};

var queue = Animator.springElement('element-id', {
    stiffness: 80,
    friction: 15,
    threshold: 0.03,
    permanent: true,
    target: target,
    styles: {
        transform: {
            translate3d: ['{x}px', '{y}px', '0px']
        }
    }
});

// Since used permanent: true on our spring settings, the spring will never
// end. To stop the spring at a later time, do the following:
queue.clearCurrent();

var scene = [
    // Each object represents both a queue, and an
    // execution time for that queue
    {
        // Start represents the time in milliseconds to start executing
        // the queue.  If the value is 0 or no value is set, the queue
        // will be kicked off immediately
        start: 0,

        // A queue is an array of object definitions -
        // these can include delays, animations, tweens,
        // springs and even other scenes that will execute
        // in order. Think of them as a JSON definition format
        // for the Animator.Queue API
        queue: [
            // This is a definition for a tween -
            // It is automatically detected because it
            // includes an element key and a to key
            {
                element: 'element-id',
                duration: 800,
                to: {
                    opacity: 0
                }
            },
            // This is the definition for a delay -
            // It has a duration key, but no element key
            {
                duration: 200,
                _finished: function(){
                    console.log('This will fire at the end of the delay');
                }
            },
            // This is the definition for an animation -
            // It has an element key and an animation key
            {
                element: 'another-element-id',
                animation: 'popin'
            }
        ]
    }, {
        // This particular queue will be kicked off after 200ms after
        // the scene has started running.
        start: 200,

        queue: [
            // This is the definition for a spring -
            // It has an element key and a spring key
            // For sake of brevity I have left it empty - it would
            // be identical to the settings passed in for a spring animation
            {
                element: 'element-id',
                spring: {}
            },
            // This is the defiition for a scene -
            // It just has a key for the scene id
            {
                scene: 'another-scene'
            }
        ]
    }
];

// With the JSON format designed for a Scene, it must be
// created as a scene: This first argument is the scene id,
// the second is the JSON definition from above
Animator.createScene('my-scene', scene);

// Once a scene is created, you can kick if off anytime
// Just use the spring id you specified on creation
Animator.runScene('my-scene');

// Instantiate a queue
var queue = new Animator.Queue();

// Add the scene to the queue
queue.addScene('my-scene');

// Start animating the queue
queue.start();