Simple Combined Animation

Just a simple example of animations being combined

by brianarn

HTML

<div id="box"></div>

CSS

#box {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #38D6E8;
}

JavaScript

dojo.require('dojo.fx');
dojo.require('dojo.fx.easing');

dojo.ready(function() {
    var top = dojo.animateProperty({
        node: 'box',
        properties: {
            top: 200
        },
        easing: dojo.fx.easing.bounceOut,
        duration: 500
    });

    var left = dojo.animateProperty({
        node: 'box',
        properties: {
            left: 200
        },
        duration: 800
    });

    var both = dojo.fx.combine([left, top]);

    dojo.connect(top, 'onEnd', function() {
        console.log('Top Ended');
    });
    dojo.connect(left, 'onEnd', function() {
        console.log('Left Ended');
    });
    dojo.connect(both, 'onEnd', function() {
        console.log('Both Ended');
    });

    both.play();
});