A worked example, rendered from real sample data. Sign in to run the tool on your own input.
ease-in-out-cubic/* CSS */
.ease-in-out-cubic {
transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
transition-duration: 600ms;
}
/* linear() — samples the curve, so it survives overshoot and springs exactly */
.ease-in-out-cubic-precise {
transition-timing-function: linear(0, 0.0021, 0.0089, 0.0216, 0.0415, 0.0708, 0.1124, 0.1707, 0.2521, 0.363, 0.5, 0.637, 0.7479, 0.8293, 0.8876, 0.9292, 0.9585, 0.9784, 0.9911, 0.9979, 1);
}
/* JavaScript */
const ease_in_out_cubic = (t) => {
const [x1, y1, x2, y2] = [0.65, 0, 0.35, 1];
const ax = (t, a, b) => 3 * (1 - t) ** 2 * t * a + 3 * (1 - t) * t ** 2 * b + t ** 3;
let lo = 0, hi = 1, u = t;
for (let i = 0; i < 24; i++) {
const x = ax(u, x1, x2);
if (Math.abs(x - t) < 1e-5) break;
x < t ? (lo = u) : (hi = u);
u = (lo + hi) / 2;
}
return ax(u, y1, y2);
};
/* Framer Motion */
transition={{ duration: 0.6, ease: [0.65, 0, 0.35, 1] }}
/* GSAP */
gsap.to(target, { duration: 0.6, ease: "cubic-bezier(0.65,0,0.35,1)" });
@media (prefers-reduced-motion: reduce) {
.ease-in-out-cubic, .ease-in-out-cubic-precise {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Generate easing functions in C#, GLSL, JS with visual curve preview. Part of the DevTools Surf developer suite. Browse more tools in the Game Dev collection.