JavaScript: the Zepto framework

Zepto is a lightweight and powerful JavaScript framework created to handle all the aspects of the mobile development for Webkit-based browsers (Safari, Chrome and related browsers). Zepto uses almost the same syntax and language features of jQuery, which makes this framework very easy to be integrated with other libraries (jQuery above all). Zepto is able to handle AJAX, selectors, touch events, animations, effects and browser detection plus all other features which are typical in a mobile environment.

For example, it can animate elements using Webkit transitions and transformations in this way:

(function($, undefined){
  $.fn.anim = function(properties, duration, ease, callback){
    var transforms = [], opacity, key;
    for (key in properties)
      if (key === 'opacity') opacity = properties[key];
      else transforms.push(key + '(' + properties[key] + ')');

    $.isFunction(callback) && this.one('webkitTransitionEnd', callback);

    return this.css({
      '-webkit-transition': 'all ' + (duration !== undefined ? duration : 0.5) + 's ' + (ease || ''),
      '-webkit-transform': transforms.join(' '),
      opacity: opacity
    });
  }
})(Zepto);

As you can see, Zepto's syntax is really similar to the jQuery's syntax, even in the name of its core methods (such as $.isFunction()). Here's a practical example of the anim() method:

$('#test').anim({ rotate: '720deg', opacity: .5 }, 2, 'ease-out');

You can see the demo below (it works only in Webkit-based browsers).

Demo

Live demo