santaclaas / linear-easing-generator

linear() easing generator

For a long time, easing on the web was limited to cubic-bezier, meaning you couldn't do easings like bounce, spring, or elastic without JavaScript. But now linear() is here! Well, almost here.

linear() works by defining a set of points. And, if you define enough points, you can create things that look and feel like curves.

That's where the linear() easing generator comes in. It can convert JavaScript/SVG easing definitions into linear() format.

Check out the bounce demo. It gives you:

:root {
  --bounce-easing: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
    1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
    0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
    0.973, 1, 0.988, 0.984, 0.988, 1
  );
}

Which you can use in animations and transitions:

.whatever {
  animation-timing-function: var(--bounce-easing);
}

Running locally

npm i
npm run dev