Customizing the scrolling animation
Scrollable demo 11 / 11 : 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:
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;