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.

Flour

What plugin are you using? That method isn't part of the jQuery API. – Clement

Answer 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'.

Ivelisseivens

That does it. The typical swing effect. Thanks. – Flour

Answer 2

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

And a great list of easings can be found here:

http://easings.net/

Skirt

Answer 3

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

try easing:'elasout'

Bathyscaphe

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. – Bathyscaphe

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 – Halftone

Answer 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/

Chattel