Example: Multiple Instances

Setting up the first YUI Instance

Here we will create our first YUI instance and tell it to load the anim module.

YUI().use('anim', function(Y) {

});

Using Animation

Now let's setup a simple animation on the Node #demo.

YUI().use('anim', function(Y) {
    var anim = new Y.Anim({
        node: '#demo',
        to: {
            height: 50,
            width: 150
        },
        from: {
            height: 100,
            width: 100
        },
        direction: 'alternate',
        iterations: 30,
        duration: .5
    });
    anim.run();
});

Setting up the second YUI Instance

Here we will create our second YUI instance and tell it to load the dd-drag module.

Since we didn't specify the anim module, we will not have access to it in this instance.

YUI().use('dd-drag', function(Y) {

});

Making the node draggable

Now let's make the same node draggable (while it's animated).

YUI().use('dd-drag', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#demo'
    });
});

Full Example Source

<style>
    #demo {
        height: 100px;
        width: 100px;
        border: 1px solid black;
        background-color: #8DD5E7;
        cursor: move;
    }
    #play {
        height: 200px;
    }
</style>

<div id="play">
    <div id="demo"></div>
</div>

<script>
YUI().use('anim', function(Y) {
    var anim = new Y.Anim({
        node: '#demo',
        to: {
            height: 50,
            width: 150
        },
        from: {
            height: 100,
            width: 100
        },
        direction: 'alternate',
        iterations: 30,
        duration: .5
    });
    anim.run();
});

YUI().use('dd-drag', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#demo'
    });
});

</script>