CODEWITHSUNDEEP
jqueryscrolltoeasing-functions
JoaoPedro
JoaoPedro

Reputation: 511

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.

Upvotes: 8

Views: 27028

Answers (4)

Mike Wells
Mike Wells

Reputation: 319

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

And a great list of easings can be found here:

http://easings.net/

Upvotes: 5

Brian Williams
Brian Williams

Reputation: 83

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/

Upvotes: 1

Gideon
Gideon

Reputation: 18491

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

Upvotes: 10

Shikiryu
Shikiryu

Reputation: 10219

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

try easing:'elasout'

Upvotes: 1

Related Questions