CSS Spring Animation Precompute

precompute-spring-css.js

/**
* Taken From:
* Article: https://medium.com/@dtinth/spring-animation-in-css-2039de6e1a03
* By: Thai Pangsakulyanont
*/

function spring(t) {
	return -0.5 * (2.71828 ** (-6 * t)) * (
		-2 * (2.71828 ** (6 * t)) + Math.sin(12 * t) + 2 * Math.cos(12 * t));
}

function lerp(a, b, p) {
	return a + p * (b - a);
}

function precompute() {
	let str = "@keyframes suave {\n";

	for (let i = 0; i <= 100; i++) {
		t = i / 100;
		p = spring(t);

		str += `\t${i}%   { transform: scale(${lerp(0, 1, p)}); }\n`;
	}

	return str += "}";
}

console.log(precompute());