Adding custom easings

[nmec]

Now that back, bounce, and elastic easings have been removed, is it possible to add them as custom easings if they are still required?

[ydaniv]

@nmec you could always add your custom easing to the Velocity.Easings object. Is that what you're asking?

[nmec]

Yes, I saw that in the source, but was unsure how to go about adding my own. In particular I'm interested in adding bounce easings.

[ydaniv]

Did you try playing around with the physics spring easing tester? http://codepen.io/julianshapiro/pen/hyeDg

I think you could get your desired effect with that.

[nmec]

Thanks for that, but it doesn't seem to do bounce easings. It also doesn't show how to register your own easings.

[ydaniv]

Sorry, I guess I don't really understand what bounce easing actually means. Anyway, an easing in Velocity is practically a function that takes a single parameter which is a number 0-1 representing the percent of time elapsed out of the full duration and should return a number which determines progress, where 0 is the start value and 1 the end value.

[nmec]

Bounce easing example

[ydaniv]

Well... adding the RK4 spring easing was kinda fun (:

@julianshapiro it's up to you.

[julianshapiro]

Did you try playing around with the physics spring easing tester? http://codepen.io/julianshapiro/pen/hyeDg. I think you could get your desired effect with that.

@ydaniv is right. This should typically be your first resort. If you really want a bounce easing, I'd reconsider why you want a bounce easing <3

Having said this, re-adding support is trivial. I just explained how in the FAQ: #47. Go check it out.

As for back/bounce in particular, you'll need to dig into jQuery UI's code for these easing types. I haven't tested this, but something like this might work. Might need a bit of modification:

var VelocityContainer = window.Velocity || $.Velocity;

$.extend(VelocityContainer.Easings, {
    Back: function( p ) {
        return p * p * ( 3 * p - 2 );
    },
    Bounce: function ( p ) {
        var pow2,
            bounce = 4;

        while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
        return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
    }
});

$.each([ "Back", "Bounce" ], function( name, easeIn ) {
    VelocityContainer[ "easeIn" + name ] = easeIn;
    VelocityContainer[ "easeOut" + name ] = function( p ) {
        return 1 - easeIn( 1 - p );
    };
    VelocityContainer[ "easeInOut" + name ] = function( p ) {
        return p < 0.5 ?
            easeIn( p * 2 ) / 2 :
            1 - easeIn( p * -2 + 2 ) / 2;
    };
});

[AfterAllDev]

Changing the $.each section slightly to the following worked for me:

$.each([ "Back", "Bounce" ], function( index, easeInName ) {

    var easeIn = VelocityContainer.Easings[easeInName];

    VelocityContainer.Easings[ "easeIn" + easeInName ] = easeIn;
    VelocityContainer.Easings[ "easeOut" + easeInName ] = function( p ) {
        return 1 - easeIn( 1 - p );
    };
    VelocityContainer.Easings[ "easeInOut" + easeInName ] = function( p ) {
        return p < 0.5 ?
            easeIn( p * 2 ) / 2 :
            1 - easeIn( p * -2 + 2 ) / 2;
    };
});