Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery ScrollTo Easing

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.

like image 602
JoaoPedro Avatar asked Nov 25 '10 09:11

JoaoPedro


4 Answers

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

like image 185
Gideon Avatar answered Nov 12 '22 17:11

Gideon


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

And a great list of easings can be found here:

http://easings.net/

like image 5
Mike Wells Avatar answered Nov 12 '22 16:11

Mike Wells


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

try easing:'elasout'

like image 1
Shikiryu Avatar answered Nov 12 '22 16:11

Shikiryu


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/

like image 1
Brian Williams Avatar answered Nov 12 '22 17:11

Brian Williams