Skip to content

Instantly share code, notes, and snippets.

@allenhwkim
Created March 20, 2019 04:32
Show Gist options
  • Select an option

  • Save allenhwkim/1a79eed7fa0d1531b57a635a8ec26a8e to your computer and use it in GitHub Desktop.

Select an option

Save allenhwkim/1a79eed7fa0d1531b57a635a8ec26a8e to your computer and use it in GitHub Desktop.
animate timing functions
export const timing = {
'linear': function(k) {
return k;
},
'ease-in': function(k) {
return Math.pow(k, 1.675);
},
'ease-out': function(k) {
return 1 - Math.pow(1 - k, 1.675);
},
'ease-in-out': function(k) {
return .5*(Math.sin((k - .5)*Math.PI) + 1);
},
'bounce-sta': function(k) {
return 1 - Math.sin((1 - k)*s)/Math.sin(s);
},
'bounce-end': function(k) {
return Math.sin(k*e)/Math.sin(e);
},
'bounce-sta-end': function(k) {
return (Math.sin(k*(e - s) + s)
- Math.sin(s))/(Math.sin(e) - Math.sin(s));
},
'in-quad': function(n){
return n * n;
},
'out-quad': function(n){
return n * (2 - n);
},
'in-out-quad': function(n){
n *= 2;
if (n < 1) return 0.5 * n * n;
return - 0.5 * (--n * (n - 2) - 1);
},
'in-cube': function(n){
return n * n * n;
},
'out-cube': function(n){
return --n * n * n + 1;
},
'in-out-cube': function(n){
n *= 2;
if (n < 1) return 0.5 * n * n * n;
return 0.5 * ((n -= 2 ) * n * n + 2);
},
'in-quart': function(n){
return n * n * n * n;
},
'out-quart': function(n){
return 1 - (--n * n * n * n);
},
'in-out-quart': function(n){
n *= 2;
if (n < 1) return 0.5 * n * n * n * n;
return -0.5 * ((n -= 2) * n * n * n - 2);
};
'in-quint': function(n){
return n * n * n * n * n;
},
'out-quint': function(n){
return --n * n * n * n * n + 1;
},
'in-out-quint': function(n){
n *= 2;
if (n < 1) return 0.5 * n * n * n * n * n;
return 0.5 * ((n -= 2) * n * n * n * n + 2);
},
'in-sine': function(n){
return 1 - Math.cos(n * Math.PI / 2 );
},
'out-sine': function(n){
return Math.sin(n * Math.PI / 2);
},
'in-out-sine': function(n){
return .5 * (1 - Math.cos(Math.PI * n));
},
'in-expo': function(n){
return 0 == n ? 0 : Math.pow(1024, n - 1);
};
'out-expo': function(n){
return 1 == n ? n : 1 - Math.pow(2, -10 * n);
},
'in-out-expo': function(n){
if (0 == n) return 0;
if (1 == n) return 1;
if ((n *= 2) < 1) return .5 * Math.pow(1024, n - 1);
return .5 * (-Math.pow(2, -10 * (n - 1)) + 2);
},
'in-circ': function(n){
return 1 - Math.sqrt(1 - n * n);
},
'out-circ': function(n){
return Math.sqrt(1 - (--n * n));
},
'in-out-circ': function(n){
n *= 2
if (n < 1) return -0.5 * (Math.sqrt(1 - n * n) - 1);
return 0.5 * (Math.sqrt(1 - (n -= 2) * n) + 1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment