Easings are the foundation of motion graphics, and great for adding flair to animations. Easings.net has a bunch of common easings.
I ported them to JavaScript on my After Effects Fun page, so let’s port them to VEX!
To use one, copy paste it into a wrangle and call it like so:
float outCubic(float x) {
return 1 - pow(1 - x, 3);
}
// Easings expect a value between 0 and 1
float x = clamp(f@Time, 0, 1);
v@P.x += outCubic(x);
Also check out easings by Tackyflea and Lucky Dee!
float inSine(float x) {
return 1 - cos((x * PI) / 2);
}
float outSine(float x) {
return sin((x * PI) / 2);
}
float inOutSine(float x) {
return -(cos(PI * x) - 1) / 2;
}
float inQuad(float x) {
return x * x;
}
float outQuad(float x) {
return 1 - (1 - x) * (1 - x);
}
float inOutQuad(float x) {
return x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2;
}
float inCubic(float x) {
return x * x * x;
}
float outCubic(float x) {
return 1 - pow(1 - x, 3);
}
float inOutCubic(float x) {
return x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2;
}
float inQuart(float x) {
return x * x * x * x;
}
float outQuart(float x) {
return 1 - pow(1 - x, 4);
}
float inOutQuart(float x) {
return x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2;
}
float inQuint(float x) {
return x * x * x * x * x;
}
float outQuint(float x) {
return 1 - pow(1 - x, 5);
}
float inOutQuint(float x) {
return x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2;
}
float inExpo(float x) {
return x == 0 ? 0 : pow(2, 10 * x - 10);
}
float outExpo(float x) {
return x == 1 ? 1 : 1 - pow(2, -10 * x);
}
float inOutExpo(float x) {
return x == 0
? 0
: x == 1
? 1
: x < 0.5 ? pow(2, 20 * x - 10) / 2
: (2 - pow(2, -20 * x + 10)) / 2;
}
float inCirc(float x) {
return 1 - sqrt(1 - pow(x, 2));
}
float outCirc(float x) {
return sqrt(1 - pow(x - 1, 2));
}
float inOutCirc(float x) {
return x < 0.5
? (1 - sqrt(1 - pow(2 * x, 2))) / 2
: (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2;
}
float inBack(float x) {
float c1 = 1.70158;
float c3 = c1 + 1;
return c3 * x * x * x - c1 * x * x;
}
float outBack(float x) {
float c1 = 1.70158;
float c3 = c1 + 1;
return 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2);
}
float inOutBack(float x) {
float c1 = 1.70158;
float c2 = c1 * 1.525;
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;
}
float inElastic(float x) {
float c4 = (2 * PI) / 3;
return x == 0
? 0
: x == 1
? 1
: -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4);
}
float outElastic(float x) {
float c4 = (2 * PI) / 3;
return x == 0
? 0
: x == 1
? 1
: pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
}
float inOutElastic(float x) {
float c5 = (2 * PI) / 4.5;
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;
}
float inBounce(float x) {
return 1 - outBounce(1 - x);
}
float outBounce(float x) {
float n1 = 7.5625;
float d1 = 2.75;
if (x < 1 / d1) {
return n1 * x * x;
} else if (x < 2 / d1) {
float a = x - 1.5 / d1;
return n1 * a * a + 0.75;
} else if (x < 2.5 / d1) {
float a = x - 2.25 / d1;
return n1 * a * a + 0.9375;
} else {
float a = x - 2.625 / d1;
return n1 * a * a + 0.984375;
}
}
float inOutBounce(float x) {
return x < 0.5
? (1 - outBounce(1 - 2 * x)) / 2
: (1 + outBounce(2 * x - 1)) / 2;
}