Skip to content

Instantly share code, notes, and snippets.

@monsieuroeuf
Last active October 11, 2018 13:57
Show Gist options
  • Save monsieuroeuf/7667341 to your computer and use it in GitHub Desktop.
Save monsieuroeuf/7667341 to your computer and use it in GitHub Desktop.
How to use Ease and Wizz's elastic easing in one dimension, even when applied to a 2D property like scale. Line 60 is where the magic happens. #easeandwizz
// Ease and Wizz 2.0.4 : outElastic : All keyframes
// Ian Haigh (http://ianhaigh.com/easeandwizz/)
// Last built: 2013-07-05T11:46:51+10:00
// some defaults
var p = 0.81; // period for elastic
var a = 50; // amplitude for elastic
var s = 1.70158; // overshoot amount for "back"
function easeandwizz_outElastic(t, b, c, d, a, p) {
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
}
function easeAndWizz() {
var n = 0;
if (numKeys > 0) {
n = nearestKey(time).index;
if (key(n).time > time) { n-- }
}
try {
var key1 = key(n);
var key2 = key(n+1);
} catch(e) {
return null;
}
// determine how many dimensions the keyframes need
var dim = 1; // It's gotta have at least ONE dimension
try {
key(1)[1];
dim = 2;
key(1)[2];
dim = 3;
} catch(e) {}
t = time - key1.time;
d = key2.time - key1.time;
sX = key1[0];
eX = key2[0] - key1[0];
if (dim >= 2) {
sY = key1[1];
eY = key2[1] - key1[1];
if (dim >= 3) {
sZ = key1[2];
eZ = key2[2] - key1[2];
}
}
if ((time < key1.time) || (time > key2.time)) {
return value;
} else {
val1 = easeandwizz_outElastic(t, sX, eX, d, a, p, s);
switch (dim) {
case 1:
return val1;
break;
case 2:
val2 = easeandwizz_outElastic(t, sY, eY, d, a, p, s);
//////////////////////////////////////////////////
//////////////////////////////////////////////////
return [value[0], val2]; // This is the bit that's changed
//////////////////////////////////////////////////
//////////////////////////////////////////////////
break;
case 3:
val2 = easeandwizz_outElastic(t, sY, eY, d, a, p, s);
val3 = easeandwizz_outElastic(t, sZ, eZ, d, a, p, s);
return [val1, val2, val3];
break;
default:
return null;
}
}
}
(easeAndWizz() || value);
@duggaditch
Copy link

Monsieur Oeuf! Are you still active sir? The above is AMAZINGLY useful for me (a complete beginner) but I can't work out how to change it from affecting the X scale of a layer, to changing the Y scale instead... Can you save me?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment