Clockz.js (demo)

Clockz is a Super-smooth Frame Animation manager to help you manage multiples animations in same time.

Installation

Just include this script after jQuery. Requires jQuery 1.4+.

<script src='js/jquery.js'></script>
<script src='js/clockz.js'></script>

Animation

This is how you can define a complex animation.

var myAnim = {
    name: 'phone2',                // Animation name
    loop: true,                    // looping ? (default: false)
    loopStart: 0,                // loop start frame index (default: 0)
    loopEnd: 3,                    // loop end frame index
    frames: [
        {
            duration: 2000        // Frame duration, used without properties to pause
        },
        {
            type: 'jquery',        // Frame type, used for hook (default: jquery)
            properties: {        // Frame properties
                left: 410
            },
            duration: 800,        // Frame properties
            easing: 'swing'        // Frame easing
        }
    ]                    
};

Hook

With a hook function, you can manage multiples animation frameworks like jQuery, Transit, Greensock and much mores.

clockz.playHook = function(node, frame, callback) {
    var duration = frame.duration || 400;
    var properties = frame.properties || null;            
    if (properties) {
        var jnode = $(node); // node selector (ex: '.class','#id' etc..)
        if (!jnode) {
            this.error( 'playHook(): node is invalid.' );
            return;                    
        }
        var type = frame.type || 'jquery';
        var easing = frame.easing || 'swing';                
        switch (type) {
            // handle jQuery frames
            case 'jquery':
                        $(node).animate(properties, duration, easing, callback);
                        break;
            // handle Transit frames
            case 'transit':
                $(node).transition($.extend({
                    duration: duration,
                    easing: easing,
                    complete: callback
                }, properties));
                break;
            // handle Greensock frames
            case 'greensock':
                // ...
                break;
        }
    }
    else {
        setTimeout(callback, duration); // to pause animation when no frame properties found
    }               
};

Usage

This is a complete example to see Clockz in action ;-)

$(function () {
    // create a new clockz manager
    var clockz = new Clockz();
    console.log( 'jquery: ' + $().jquery );
    console.log( 'clockz: ' + clockz.version );
    var anim1 = {
        name: 'anim1',
        loop: true,
        loopStart: 1,
        loopEnd: 2,
        loopRepeat: 5,
        frames: [
            {
                properties: { left: 300, opacity: 0.2, width: 200, height: 200 },
                duration: 1000,
                easing: 'swing'
            },
            {
                properties: { top: 300,    opacity: 1 },
                duration: 1000,
                easing: 'swing'
            },
            {
                properties: { top: 10, left: 10, width: 150, height: 150 },
                duration: 1000,
                easing: 'swing'
            }
        ]                    
    };
    var anim2 = {
        name: 'anim2',
        loop: true,
        frames: [
            {
                properties: { top: 300 },
                duration: 2000,
                easing: 'swing'
            },
            {
                type: 'transit',
                properties: { rotate: '+=30', },
                duration: 400,
                easing: 'fast'
            },
            {
                properties: { left: 500, opacity: 0.2 },
                duration: 1000,
                easing: 'swing'
            },
            {
                type: 'transit',
                properties: { rotate: '+=30' },
                duration: 400,
                easing: 'fast'
            },
            {
                properties: { top: 10, left: 10, opacity: 1 },
                duration: 1000,
                easing: 'swing'
            }
        ]                    
    };
    // redefine a clockz hook function to manage
    // jQuery, Transit and Greensock animation frameworks                
    clockz.playHook = function(node, frame, callback) {
        var duration = frame.duration || 400;
        var properties = frame.properties || null;            
        if (properties) {
            var jnode = $(node); // node selector (ex: '.class','#id' etc..)
            if (!jnode) {
                this.error( 'playHook(): node is invalid.' );
                return;                    
            }
            var type = frame.type || 'jquery';
            var easing = frame.easing || 'swing';                
            switch (type) {
                // handle jQuery frames
                case 'jquery':
                            $(node).animate(properties, duration, easing, callback);
                            break;
                // handle Transit frames
                case 'transit':
                    $(node).transition($.extend({
                        duration: duration,
                        easing: easing,
                        complete: callback
                    }, properties));
                    break;
                // handle Greensock frames
                case 'greensock':
                    // ...
                    break;
            }
        }
        else {
            setTimeout(callback, duration); // to pause animation when no frame properties found
        }               
    };
    clockz.create('#block1', anim1);    // link an anim1 with #block1
    clockz.create('#block2', anim2);    // link an anim2 with #block2
    clockz.playAll();                    // play all animations
});

Donations

Donations are always welcome .

Coins	Symbols	Addresses
	BTC	3B52fbzNFQTaKZxWf5GrCUsASD2UP8na4A
	ETH	0x1C389f1f85Cdb3C2996b83fAc87E496A80698B7C
	SOL	F14pWhGjGLcCF8RMk4JhbK2kD49iBBwa9KFygRJo54Fm