Skip to content

jakearchibald/linear-easing-generator

Repository files navigation

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published