#

Jump to Table of Contents

# Example: Multiple Instances

This example shows how to work with multiple YUI 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>