Customizing the scrolling animation

It is possible to alter scrollable's animation style or so-called "easing". Scroll through the following items and you can see it in action:

standalone demo

Custom animation

You can add new animations to the scrollable by adding them to the jQuery.easing object. Here we add one animation called "custom":

// custom easing called "custom"
$.easing.custom = function (x, t, b, c, d) {
	var s = 1.70158;
	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

As you can see the animation code is not for sane people. I grabbed this function from the jQuery Easing Plugin's source code. There are quite a lot of different algorithms that you can try. This same library is being used by the jQuery UI project as well.

Scrollable setup

The scrollable setup is simple. You configure the custom easing with the easing property. We can also change the easing speed with the speed property. Here we made it a little slower so that the animation is more visible.

// use the custom easing
$("div.scrollable").scrollable({easing: 'custom', speed: 700, circular: true});

Changing the easing of an existing scrollable

You can dynamically change the easing settings for an existing scrollable:

  // get handle to the configuration
  var conf = $("#tab_panes").scrollable().getConf();
 
  // alter the easing
  conf.easing = 'custom';
  conf.speed = 700;

Photo credits »