Auto loop NanoTween animations in HTML5 banner ad

I am hoping to auto loop a HTML5 banner advertisement that I have. The animations are built using NanoTween. Here is the JS code:

var container  = getElement("id","container");

var items = {
c1: getElement("id", "copy_1"),
c2: getElement("id", "copy_2"),
c3: getElement("id", "copy_3"),
c4: getElement("id", "copy_4"),
c5: getElement("id", "copy_5"),
c6: getElement("id", "copy_6"),
button: getElement("id", "button"),
elipseOverlay: getElement("id", "elipseOverlay"),
elipseOverlay2: getElement("id", "elipseOverlay2"),
elipse: getElement("id", "elipse"),
elipse2: getElement("id", "elipse2"),
elipseContainer: getElement("id", "elipseContainer"),
bar: getElement("id", "bar"),
magnaclick: getElement("id", "magnaclick"),
shirt: getElement("id", "shirt")
};

function init() {
 setTimeout(function() {
    startAnimation();
}, 5);
};

//
function startAnimation() {
container.style.visibility = "visible";

var delay = 0;
var quickerSpeed = 0.3;
var mediumSpeed = 1.7;
var quickSpeed = 0.5;

var easeInQuad = "cubic-bezier(0.250, 0.985, 0.340, 0.985)";
var easeOutQuad = "cubic-bezier(0.250, 0.460, 0.450, 0.940)";
var linear = 'linear';
var pause = 3.6;
var loop = 0;
var loops = 1;

var magnaClickFps = 15;
var shirtFps = 10;
var magnaClickFrames = 5;
var shirtFrames = 5;


var magnaclick = function() {
    for (var i=1; i<=magnaClickFrames; i++) {
        (function(idx){
            setTimeout(function(){
                items.magnaclick.className = 'sprite2 magnaclick-'+idx;
            },(idx-1)*(1000/magnaClickFps));
        })(i);
    }
};

var shirt = function() {
    for (var i=2; i<=shirtFrames; i++) {
        (function(idx){
            setTimeout(function(){
                items.shirt.style = '';
                items.shirt.className = 'sprite2 shirt-'+idx;
            },(idx-1)*(1000/shirtFps));
        })(i);
    }
};

var animate = function() {

    loop++;

    // reset
    NanoTween.to(items.c1, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c2, 0, { opacity: 0, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c3, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c4, 0, { opacity: 0, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c5, 0, { transform: 'translate3d(-150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c6, 0, { transform: 'translate3d(150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay});
    NanoTween.to(items.button, 0, { opacity: 1, ease:easeInQuad, delay: delay});

    // initial delay
    delay += 0.2;

    // circle 1st half
    setTimeout(function(){
        items.elipseOverlay2.className += ' in';
        items.elipse2.className += ' in';
    },delay*1000);

    // circle second half
    setTimeout(function(){
        items.elipseOverlay.className += ' in';
        items.elipse.className += ' in';
    },(delay+=.2)*1000);

    // cicrcle bar
    setTimeout(function(){
        items.bar.className += ' in';
    },(delay+=.2)*1000);

    delay += quickerSpeed;

    // no more zoom in
    NanoTween.to(items.c1, quickerSpeed, { opacity: 1, scale: 1,  ease:easeInQuad, delay: delay});
    //NanoTween.to(items.c1, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});
    delay += 2*quickerSpeed;

    // fussing with buttons fade in
    NanoTween.to(items.c2, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay});
    //NanoTween.to(items.c2, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});

    // pause after frame 1
    delay += quickSpeed + 1.2;

    // frame 1 fade out
    NanoTween.to(items.elipseContainer, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.c1, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.c2, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.bar, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.button, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    delay += quickerSpeed;

    // magnaclick animation
    //setTimeout(magnaclick, delay*1000);
    //delay += ((1000/magnaClickFps)*magnaClickFrames/1000);

    //magnaclick last farme static
    items.magnaclick.className = 'sprite2 magnaclick-5';
    NanoTween.to(items.magnaclick, 1, { opacity: 1, ease:easeOutQuad, delay: delay - 0.5});
    NanoTween.to(items.magnaclick, quickSpeed, { transform: 'translate(0px, 10px)', ease:easeInQuad, delay: delay - 0.5});

    // new zoom in
    NanoTween.to(items.c3, quickerSpeed, { opacity: 1, scale: 1, ease:easeInQuad, delay: delay});
    //NanoTween.to(items.c3, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});
    delay += quickerSpeed + 0.2; // + pause

    // magnetic buttons fade in
    NanoTween.to(items.c4, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay});
    //NanoTween.to(items.c4, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});

    // pause
    delay += quickSpeed + 0.5;

    // copy fades out
    NanoTween.to(items.c3, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.c4, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    // shirt fades in
    NanoTween.to(items.shirt, mediumSpeed, { opacity: 1, ease:easeInQuad, delay: delay});

    delay += quickSpeed;
    setTimeout(shirt, delay*1000);

    delay += ((1000/shirtFps)*shirtFrames/1000);
    NanoTween.to(items.c5, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 1, ease:easeOutQuad, delay: delay});
    delay += quickSpeed;
    NanoTween.to(items.c6, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 2, ease:easeOutQuad, delay: delay});



    //
    //if (loop<loops) {
    //    delay += +quickerSpeed + pause;
    //    NanoTween.to(items.i3, quickerSpeed, { transform: 'translate3d(-150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay });
    //    NanoTween.to(items.c3, quickerSpeed, { transform: 'translate3d(150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay });
    //
    //    setTimeout(animate, quickerSpeed*1000);
    //}
};

animate();

}

function getElement(element, id) {
var mc;
switch(element){
    case "id":
        mc = document.getElementById(id);
        break;

    case "class":
        mc = document.getElementsByClassName(id);
        break;
}

return mc;
}


window.onload = function(){
init();
};

Is there code that I can add to automatically loop this animation after a brief pause on the last frame? Please let me know if this is possible. Thank you for your help!

Solution

This can be done by adding the following after the last NanoTween call. The cycle will pause for 3.6 seconds (var pause = 3.6;) before restarting.

// the last Tween ran for this duration, so we need to include to get the total duration
delay += quickerSpeed; 

setTimeout(function() {
    delay = 0; // reset animation total duration counter
    animate(); // begin again
}, (delay + pause) * 1000); // Convert delay & pause to milliseconds & restart once time has elapsed

Here's the full code incorporating the above changes:

var container  = getElement("id","container");

var items = {
    c1: getElement("id", "copy_1"),
    c2: getElement("id", "copy_2"),
    c3: getElement("id", "copy_3"),
    c4: getElement("id", "copy_4"),
    c5: getElement("id", "copy_5"),
    c6: getElement("id", "copy_6"),
    button: getElement("id", "button"),
    elipseOverlay: getElement("id", "elipseOverlay"),
    elipseOverlay2: getElement("id", "elipseOverlay2"),
    elipse: getElement("id", "elipse"),
    elipse2: getElement("id", "elipse2"),
    elipseContainer: getElement("id", "elipseContainer"),
    bar: getElement("id", "bar"),
    magnaclick: getElement("id", "magnaclick"),
    shirt: getElement("id", "shirt")
};

function init() {
     setTimeout(function() {
        startAnimation();
    }, 5);
};

//
function startAnimation() {
    container.style.visibility = "visible";

    var delay = 0;
    var quickerSpeed = 0.3;
    var mediumSpeed = 1.7;
    var quickSpeed = 0.5;

    var easeInQuad = "cubic-bezier(0.250, 0.985, 0.340, 0.985)";
    var easeOutQuad = "cubic-bezier(0.250, 0.460, 0.450, 0.940)";
    var linear = 'linear';
    var pause = 3.6;
    var loop = 0;
    var loops = 5;

    var magnaClickFps = 15;
    var shirtFps = 10;
    var magnaClickFrames = 5;
    var shirtFrames = 5;


    var magnaclick = function() {
        for (var i=1; i<=magnaClickFrames; i++) {
            (function(idx){
                setTimeout(function(){
                    items.magnaclick.className = 'sprite2 magnaclick-'+idx;
                },(idx-1)*(1000/magnaClickFps));
            })(i);
        }
    };

    var shirt = function() {
        for (var i=2; i<=shirtFrames; i++) {
            (function(idx){
                setTimeout(function(){
                    items.shirt.style = '';
                    items.shirt.className = 'sprite2 shirt-'+idx;
                },(idx-1)*(1000/shirtFps));
            })(i);
        }
    };

    var animate = function() {

        loop++;

        // reset
        NanoTween.to(items.c1, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c2, 0, { opacity: 0, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c3, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c4, 0, { opacity: 0, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c5, 0, { transform: 'translate3d(-150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c6, 0, { transform: 'translate3d(150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay});
        NanoTween.to(items.button, 0, { opacity: 1, ease:easeInQuad, delay: delay});

        // initial delay
        delay += 0.2;

        // circle 1st half
        setTimeout(function(){
            items.elipseOverlay2.className += ' in';
            items.elipse2.className += ' in';
        },delay*1000);

        // circle second half
        setTimeout(function(){
            items.elipseOverlay.className += ' in';
            items.elipse.className += ' in';
        },(delay+=.2)*1000);

        // cicrcle bar
        setTimeout(function(){
            items.bar.className += ' in';
        },(delay+=.2)*1000);

        delay += quickerSpeed;

        // no more zoom in
        NanoTween.to(items.c1, quickerSpeed, { opacity: 1, scale: 1,  ease:easeInQuad, delay: delay});
        //NanoTween.to(items.c1, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});
        delay += 2*quickerSpeed;

        // fussing with buttons fade in
        NanoTween.to(items.c2, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay});
        //NanoTween.to(items.c2, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});

        // pause after frame 1
        delay += quickSpeed + 1.2;

        // frame 1 fade out
        NanoTween.to(items.elipseContainer, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.c1, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.c2, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.bar, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.button, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        delay += quickerSpeed;

        // magnaclick animation
        //setTimeout(magnaclick, delay*1000);
        //delay += ((1000/magnaClickFps)*magnaClickFrames/1000);

            //magnaclick last frame static
            items.magnaclick.className = 'sprite2 magnaclick-5';
            NanoTween.to(items.magnaclick, 1, { opacity: 1, ease:easeOutQuad, delay: delay - 0.5});
            NanoTween.to(items.magnaclick, quickSpeed, { transform: 'translate(0px, 10px)', ease:easeInQuad, delay: delay - 0.5});

        // new zoom in
        NanoTween.to(items.c3, quickerSpeed, { opacity: 1, scale: 1, ease:easeInQuad, delay: delay});
        //NanoTween.to(items.c3, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});
        delay += quickerSpeed + 0.2; // + pause

        // magnetic buttons fade in
        NanoTween.to(items.c4, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay});
            //NanoTween.to(items.c4, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});

        // pause
        delay += quickSpeed + 0.5;

        // copy fades out
        NanoTween.to(items.c3, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.c4, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        // shirt fades in
        NanoTween.to(items.shirt, mediumSpeed, { opacity: 1, ease:easeInQuad, delay: delay});

        delay += quickSpeed;
        setTimeout(shirt, delay*1000);

        delay += ((1000/shirtFps)*shirtFrames/1000);
        NanoTween.to(items.c5, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 1, ease:easeOutQuad, delay: delay});
        delay += quickSpeed;
        NanoTween.to(items.c6, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 2, ease:easeOutQuad, delay: delay})

        // the last Tween ran for this duration, so we need to include to get the total duration
        delay += quickerSpeed; 

        setTimeout(function() {
            delay = 0; 
            animate();
        }, (delay + pause) * 1000); // delay & pause are in seconds

        //
        //if (loop<loops) {
        //    delay += +quickerSpeed + pause;
        //    NanoTween.to(items.i3, quickerSpeed, { transform: 'translate3d(-150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay });
        //    NanoTween.to(items.c3, quickerSpeed, { transform: 'translate3d(150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay });
        //
        //    setTimeout(animate, quickerSpeed*1000);
        //}
    };

    animate();
}

function getElement(element, id) {
    var mc;
    switch(element){
        case "id":
            mc = document.getElementById(id);
            break;

        case "class":
            mc = document.getElementsByClassName(id);
            break;
    }

    return mc;
}


window.onload = function(){
    init();
};