Last active
October 11, 2018 13:57
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?