Sample - Ease+ for Velocity.js

Back

backOut

$element.velocity({ translateX:300 }, 400, "easeOutBack");

backIn

$element.velocity({ translateX:300 }, 400, "easeInBack");

backInOut

$element.velocity({ translateX:300 }, 400, "easeInOutBack");

Elastic

elasticOut

$element.velocity({ translateX:300 }, 800, "easeOutElastic");

elasticIn

$element.velocity({ translateX:300 }, 800, "easeInElastic");

elasticInOut

$element.velocity({ translateX:300 }, 800, "easeInOutElastic");

Bounce

bounceOut

$element.velocity({ translateX:300 }, 800, "easeOutBounce");

bounceIn

$element.velocity({ translateX:300 }, 800, "easeInBounce");

bounceInOut

$element.velocity({ translateX:300 }, 800, "easeInOutBounce");

Custom Back

customBackOut

// イージング関数を新たに登録する、名前は任意、重複してたら上書き
// デフォルトは1.7
$.easeplus.addBackOut("customBackOut", 4.0);
$element.velocity({ translateX:300 }, 400, "customBackOut");
...
// 使わなくなったら削除も可能
$.easeplus.remove("customBackOut");

customBackIn

// イージング関数を新たに登録する、名前は任意、重複してたら上書き
// デフォルトは1.7
$.easeplus.addBackIn("customBackIn", 4.0);
$element.velocity({ translateX:300 }, 400, "customBackIn");
...
// 使わなくなったら削除も可能
$.easeplus.remove("customBackIn");

customBackInOut

// イージング関数を新たに登録する、名前は任意、重複してたら上書き
// デフォルトは1.7
$.easeplus.addBackInOut("customBackInOut", 4.0);
$element.velocity({ translateX:300 }, 400, "customBackInOut");
...
// 使わなくなったら削除も可能
$.easeplus.remove("customBackInOut");

Custom Elastic

customElasticOut

// イージング関数を新たに登録する、名前は任意、重複してたら上書き
// デフォルトは1, 0.3
$.easeplus.addElasticOut("customElasticOut", 3, 0.3);
$element.velocity({ translateX:300 }, 800, "customElasticOut");
...
// 使わなくなったら削除も可能
$.easeplus.remove("customElasticOut");

customElasticIn

// イージング関数を新たに登録する、名前は任意、重複してたら上書き
// デフォルトは1, 0.3
$.easeplus.addElasticIn("customElasticIn", 3, 0.3);
$element.velocity({ translateX:300 }, 800, "customElasticIn");
...
// 使わなくなったら削除も可能
$.easeplus.remove("customElasticIn");

customElasticInOut

// イージング関数を新たに登録する、名前は任意、重複してたら上書き
// デフォルトは1, 0.3*1.5
$.easeplus.addElasticInOut("customElasticInOut", 3, 0.3*1.5);
$element.velocity({ translateX:300 }, 800, "customElasticInOut");
...
// 使わなくなったら削除も可能
$.easeplus.remove("customElasticInOut");

Alias

下記の文字列でも指定ができます。

easeInSine -> sineIn
easeOutSine -> sineOut
easeInOutSine -> sineInOut

easeInQuad -> quadIn
easeOutQuad -> quadOut
easeInOutQuad -> quadInOut

easeInCubic -> cubicIn
easeOutCubic -> cubicOut
easeInOutCubic -> cubicInOut

easeInQuart -> quartIn
easeOutQuart -> quartOut
easeInOutQuart -> quartInOut

easeInQuint -> quintIn
easeOutQuint -> quintOut
easeInOutQuint -> quintInOut

easeInExpo -> expoIn
easeOutExpo -> expoOut
easeInOutExpo -> expoInOut

easeInCirc -> circIn
easeOutCirc -> circOut
easeInOutCirc -> circInOut

easeInBack -> backIn
easeOutBack -> backOut
easeInOutBack -> backInOut

easeInElastic -> elasticIn
easeOutElastic -> elasticOut
easeInOutElastic -> elasticInOut

easeInBounce -> bounceIn
easeOutBounce -> bounceOut
easeInOutBounce -> bounceInOut

Blend

// ブレンドするイージング関数を新たに登録する、名前は任意、重複してたら上書き
// 引数は
// ・名前
// ・イージング1
// ・イージング2
// ・イージング1から2に移行する比率を調整するイージング(デフォルトはlinear)
$.easeplus.addBlend("blend", "cubicIn", "backOut", "sineOut");
$element.velocity({ translateX:300 }, 600, "blend");
...
// 使わなくなったら削除も可能
$.easeplus.remove("blend");