Skip to main content

Bug Tracker

Side navigation

#7375 closed enhancement (plugin)

Opened November 02, 2010 07:38AM UTC

Closed April 16, 2011 11:58PM UTC

Last modified March 15, 2012 12:46PM UTC

Allow custom easing functions with animate

Reported by: janne.aukia@gmail.com Owned by:
Priority: undecided Milestone:
Component: effects Version: 1.4.3
Keywords: needsreview Cc:
Blocked by: Blocking:
Description

I would like to make a jQuery plugin which would allow using cubic easing in the same way as in CSS3 transformations. As far as I know, this is currently not possible, since currently all easings need to be named functions under jquery.easing and they cannot take extra parameters.

What I would like to have would be something like the following:

function constructCubicEasing(p1x,p1y,p2x,p2y) {
    return function( p, n, firstNum, diff ) {
        // here setup the actual easing func based on p1x...p2y
    };
}

$(".block").animate({"left": "0px"}, constructCubicEasing(0.42,0.0,0.58,1.0));

So instead of passing named arguments for easing functions (such as "swing" or "linear") one could pass an actual function.

Another alternative would be to have a way to pass parameters to the easing function, something like:

jquery.easing.cubic = function(p, n, firstNum, diff, extraParams) {
    // here setup the actual easing func based on p1x...p2y in extraParams
}

$(".block").animate({"left": "0px"}, "cubic", null, {p1x:0.42,p1y:0.0,p2x:0.58,p2y:1.0});

The motivation behind these is that designers often want to tweak easing parameters to please their tastes, and for them, having some config params would be nice.

Attachments (0)
Change History (4)

Changed November 02, 2010 09:05PM UTC by rwaldron comment:1

component: unfiledeffects
keywords: → needsreview
milestone: 1.5
status: newopen

Changed February 17, 2011 11:29AM UTC by gnarf comment:2

One thing to note... The "standard" fx calls to easing functions ALWAYS use

 firstNum = 0, diff = 1 
-
p
is the actual "percent" and
n
is a number of milliseconds...

Changed April 16, 2011 11:58PM UTC by john comment:3

resolution: → plugin
status: openclosed

I would be inclined to do something like this:

(function(){
  var num = 1;

  this.constructCubicEasing = function(p1x,p1y,p2x,p2y) {
    var name = "cubic" + num;

    jQuery.easing[ name ] = function( p, n, firstNum, diff ) {
        // here setup the actual easing func based on p1x...p2y
    };

    num++;

    return name;
  };
})();

Then you could just do:

$(".block").animate({"left": "0px"}, constructCubicEasing(0.42,0.0,0.58,1.0));

Changed September 09, 2011 09:09AM UTC by mail@robertdallasgray.com comment:4