YUI Library Examples: The YUI Global Object: Multiple Instances

The YUI Global Object: 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) {
 
});

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();
});

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) {
 
});

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'
    });
});

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