using zepto, is it possible to queue animations?

Question

zepto.js has an API to animate elements, which allows to include a "done" callback function. animate source

however jquery type queue API doesn't seem to be supported.

I was wondering if there's a built-in approach for creating animation sequences with zepto or should i just pinch a queue function from somewhere?

also the "done" callback doesn't pass any parameters, so its bit ugly to know which stage of the anim sequence you are at - maybe theres a workaround for that?

Answer 1

I'm not sure if you will find it helpful but I wrote a litte plugin to queue zepto animations:

$.fn.queueAnim = function (steps, callback) {
  var $selector = this;

  function iterator(step) {
    step.push(iterate);
    $selector.animate.apply($selector, step); 
  }

  function iterate() {
    if (!steps.length) return callback && callback();

    var step = steps.shift();
    iterator(step);
  }

  iterate();
}

an example usage:

$('div').queueAnim([
  [ { 'rotate': '15deg' }, 200, 'ease-out' ],
  [ { 'rotate': '-13deg' }, 300, 'ease-out' ],
  [ { 'rotate': '10deg' }, 400, 'ease-out' ],
  [ { 'rotate': '0deg' }, 500, 'ease-out' ]
], function () {
  // all done
});

Answer 2

The Callback you can pass to zepto's anim(ate) function is only called when the animation is finished.

It is save to assume that during the callback the css properties are the same as those passed in. So if you don't pass them in directly you can reuse the object.

Also, inside the callback you can always use the $.fn.css function to get the current style, although this might not be the most performant way.

Regarding queueing, using the animation callbacks you can build a rudimentary queue by calling $.fn.anim with nested callbacks.

$('div').animate({width: 200}, 1000, "linear", function(){

    $(this).animate({"background-color": "red"}, 300, "ease-in", function() {
        var $this = $(this),
            width = $this.css("width"); // will be "200px"

        $this.animate({height: 300}, 1000, "linear");
    });

});

If you want or need more advanced queues, porting the jQuery queue to zepto as a plugin should be no big deal.

Cheers