Jquery ScrollTo Easing

Question

Can´t apply an easing method to Jquery ScrollTo:

$("#scroller").scrollTo(target,1000,{axis:'x',easing:'linear'});

This doesn´t ease anything... Im starting to use jquery now (been using prototype for long) so this is surely my mistake. Do I need an easing plugin to achieve this? What are the easing option for this plugin (if any)? The documentation is not clear about this. Thanks.

Solution 1

From jQuery:

The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear.

So easing: 'linear' is not supposed to show anything. Try easing: 'swing'.

Solution 2

$("#scroller").scrollTo(target, 1000, {easing: 'easeInOutCirc'});

And a great list of easings can be found here:

http://easings.net/

Solution 3

linear is the default option of easing : linear animation => straight to the point in a sec.

try easing:'elasout'

Solution 4

I know this is an old thread but i found it and it helped me. As Palmsey has mentioned in the one of the comments, the scrollTo Demo shows an example of using easing, but doesn't actually mention that it has borrowed a small snippet of code from the easing plugin found at http://gsgd.co.uk/sandbox/jquery/easing/. The demo on scrollTo includes this code in the init.js file

    //borrowed from jQuery easing plugin
    //http://gsgd.co.uk/sandbox/jquery.easing.php
    $.easing.elasout = function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    };

However if you include the entire easing plugin mentioned above you can use any of the functions mentioned at http://easings.net/

View more solutions

Comments

[JoaoPedro]

That does it. The typical swing effect. Thanks.

[Shikiryu]

it breaks nothing, it's one easing type of scrollTo on their homepage. More particularily, it's the one used on their demo : demos.flesler.com/jquery/scrollTo (click on 'easing'). If you wanted a precise easing (there are a lot more), you should have precise that.

[Scrappydog]

If you look at the code that easing function is in init.js and not in scrollTo by default. It is part of the jQuery easing plugin: gsgd.co.uk/sandbox/jquery.easing.php