Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Animation Sequence (gallery-anim-sequence) on cdn

Last Updated: 04/7/13

+ 0 -

John Lindal

YUI Contributor

See 50 more by this user.

Created: 06/30/12
Last CDN Push: 07/25/12
Build Tag: gallery-2012.07.25-21-36
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

Manages a sequence of animations, so you don't have to chain them manually. Each item in the sequence can be a single animation, an array of animations to perform in parallel, an immediate action, or a delay.

Example of how to use Y.AnimSequence and Y.Plugin.NodeFXSequence

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.25-21-36'
}).use('gallery-anim-sequence', function(Y)
{
    // sequence animating multiple nodes
 
    var s1 = new Y.AnimSequence(
    {
        sequence:
        [
            [
                new Y.Anim({ node: '#a', from: { top: 0 }, to: { top: '100px' } }),
                new Y.Anim({ node: '#b', from: { top: 0 }, to: { top: '-100px' } })
            ],
            [
                new Y.Anim({ node: '#a', from: { backgroundColor: '#FFFFFF' }, to: { backgroundColor: '#FF0000' } }),
                new Y.Anim({ node: '#b', from: { backgroundColor: '#FFFFFF' }, to: { backgroundColor: '#0000FF' } })
            ],
            new Y.Anim({ node: '#ab', from: { backgroundColor: '#FFFFFF' }, to: { backgroundColor: '#999999' } })
        ]
    });
 
    s1.run();
 
    // node plugin
 
    var n1 = Y.one('#my-node');
    n1.plug(Y.Plugin.NodeFXSequence,
    {
        sequence:
        [
            new Y.Anim({ from: { backgroundColor: '#FFFFFF' }, to: { backgroundColor: '#FF0000' } }),
            new Y.Anim({ from: { height: '20px' }, to: { height: '50px' } }),
            new Y.Anim({ from: { backgroundColor: '#FF0000' }, to: { backgroundColor: '#00FF00' } })
        ]
    });
 
    n1.fx.run();
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.25-21-36'
}).use('gallery-anim-sequence', function(Y)
{
    // sequence animating multiple nodes

var s1 = new Y.AnimSequence(
    {
        sequence:
        [
            [
                new Y.Anim({ node: '#a', from: { top: 0 }, to: { top: '100px' } }),
                new Y.Anim({ node: '#b', from: { top: 0 }, to: { top: '-100px' } })
            ],
            [
                new Y.Anim({ node: '#a', from: { backgroundColor: '#FFFFFF' }, to: { backgroundColor: '#FF0000' } }),
                new Y.Anim({ node: '#b', from: { backgroundColor: '#FFFFFF' }, to: { backgroundColor: '#0000FF' } })
            ],
            new Y.Anim({ node: '#ab', from: { backgroundColor: '#FFFFFF' }, to: { backgroundColor: '#999999' } })
        ]
    });

s1.run();

// node plugin

var n1 = Y.one('#my-node');
    n1.plug(Y.Plugin.NodeFXSequence,
    {
        sequence:
        [
            new Y.Anim({ from: { backgroundColor: '#FFFFFF' }, to: { backgroundColor: '#FF0000' } }),
            new Y.Anim({ from: { height: '20px' }, to: { height: '50px' } }),
            new Y.Anim({ from: { backgroundColor: '#FF0000' }, to: { backgroundColor: '#00FF00' } })
        ]
    });

n1.fx.run();
});