Skip to content

Instantly share code, notes, and snippets.

@slig
Created April 28, 2018 16:14
Show Gist options
  • Save slig/145d7333052b7b2532f90d9f47e20d8e to your computer and use it in GitHub Desktop.
Save slig/145d7333052b7b2532f90d9f47e20d8e to your computer and use it in GitHub Desktop.
jQuery Easing v1.4.1 converted to TypeScript
/*
* jQuery Easing v1.4.1 - http://gsgd.co.uk/sandbox/jquery/easing/
* Open source under the BSD License.
* Copyright © 2008 George McGinley Smith
* All rights reserved.
* https://raw.github.com/gdsmith/jquery-easing/master/LICENSE
*/
import jQuery from 'jquery';
const $ = jQuery;
declare global {
interface JQueryStatic {
easing: {
jswing(x: number): number
swing(x: number): number
easeInQuad(x: number): number
easeOutQuad(x: number): number
easeInOutQuad(x: number): number
easeInCubic(x: number): number
easeOutCubic(x: number): number
easeInOutCubic(x: number): number
easeInQuart(x: number): number
easeOutQuart(x: number): number
easeInOutQuart(x: number): number
easeInQuint(x: number): number
easeOutQuint(x: number): number
easeInOutQuint(x: number): number
easeInSine(x: number): number
easeOutSine(x: number): number
easeInOutSine(x: number): number
easeInExpo(x: number): number
easeOutExpo(x: number): number
easeInOutExpo(x: number): number
easeInCirc(x: number): number
easeOutCirc(x: number): number
easeInOutCirc(x: number): number
easeInElastic(x: number): number
easeOutElastic(x: number): number
easeInOutElastic(x: number): number
easeInBack(x: number): number
easeOutBack(x: number): number
easeInOutBack(x: number): number
easeInBounce(x: number): number
easeOutBounce(x: number): number
easeInOutBounce(x: number): number
[key: string]: (x: number) => number
}
}
}
// Preserve the original jQuery "swing" easing as "jswing"
if (typeof $.easing !== 'undefined') {
$.easing.jswing = $.easing.swing;
}
const pow = Math.pow;
const sqrt = Math.sqrt;
const sin = Math.sin;
const cos = Math.cos;
const PI = Math.PI;
const c1 = 1.70158;
const c2 = c1 * 1.525;
const c3 = c1 + 1;
const c4 = (2 * PI) / 3;
const c5 = (2 * PI) / 4.5;
// x is the fraction of animation progress, in the range 0..1
function bounceOut(x: number) {
const n1 = 7.5625;
const d1 = 2.75;
if (x < 1 / d1) {
return n1 * x * x;
} else if (x < 2 / d1) {
return n1 * (x -= (1.5 / d1)) * x + .75;
} else if (x < 2.5 / d1) {
return n1 * (x -= (2.25 / d1)) * x + .9375;
} else {
return n1 * (x -= (2.625 / d1)) * x + .984375;
}
}
$.extend($.easing,
{
swing(x: number) {
return $.easing.easeOutQuad(x);
},
easeInQuad(x: number) {
return x * x;
},
easeOutQuad(x: number) {
return 1 - (1 - x) * (1 - x);
},
easeInOutQuad(x: number) {
return x < 0.5 ?
2 * x * x :
1 - pow(-2 * x + 2, 2) / 2;
},
easeInCubic(x: number) {
return x * x * x;
},
easeOutCubic(x: number) {
return 1 - pow(1 - x, 3);
},
easeInOutCubic(x: number) {
return x < 0.5 ?
4 * x * x * x :
1 - pow(-2 * x + 2, 3) / 2;
},
easeInQuart(x: number) {
return x * x * x * x;
},
easeOutQuart(x: number) {
return 1 - pow(1 - x, 4);
},
easeInOutQuart(x: number) {
return x < 0.5 ?
8 * x * x * x * x :
1 - pow(-2 * x + 2, 4) / 2;
},
easeInQuint(x: number) {
return x * x * x * x * x;
},
easeOutQuint(x: number) {
return 1 - pow(1 - x, 5);
},
easeInOutQuint(x: number) {
return x < 0.5 ?
16 * x * x * x * x * x :
1 - pow(-2 * x + 2, 5) / 2;
},
easeInSine(x: number) {
return 1 - cos(x * PI / 2);
},
easeOutSine(x: number) {
return sin(x * PI / 2);
},
easeInOutSine(x: number) {
return -(cos(PI * x) - 1) / 2;
},
easeInExpo(x: number) {
return x === 0 ? 0 : pow(2, 10 * x - 10);
},
easeOutExpo(x: number) {
return x === 1 ? 1 : 1 - pow(2, -10 * x);
},
easeInOutExpo(x: number) {
return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ?
pow(2, 20 * x - 10) / 2 :
(2 - pow(2, -20 * x + 10)) / 2;
},
easeInCirc(x: number) {
return 1 - sqrt(1 - pow(x, 2));
},
easeOutCirc(x: number) {
return sqrt(1 - pow(x - 1, 2));
},
easeInOutCirc(x: number) {
return x < 0.5 ?
(1 - sqrt(1 - pow(2 * x, 2))) / 2 :
(sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2;
},
easeInElastic(x: number) {
return x === 0 ? 0 : x === 1 ? 1 :
-pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4);
},
easeOutElastic(x: number) {
return x === 0 ? 0 : x === 1 ? 1 :
pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
},
easeInOutElastic(x: number) {
return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ?
-(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2 :
pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5) / 2 + 1;
},
easeInBack(x: number) {
return c3 * x * x * x - c1 * x * x;
},
easeOutBack(x: number) {
return 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2);
},
easeInOutBack(x: number) {
return x < 0.5 ?
(pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2 :
(pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
},
easeInBounce(x: number) {
return 1 - bounceOut(1 - x);
},
easeOutBounce: bounceOut,
easeInOutBounce(x: number) {
return x < 0.5 ?
(1 - bounceOut(1 - 2 * x)) / 2 :
(1 + bounceOut(2 * x - 1)) / 2;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment