// the find
ai/easings.net
Easing Functions Cheat Sheet
A single-page reference of easing curves, from the standard Sine and Quad families through Back, Bounce and Elastic. Each curve is shown as a live animation next to its CSS value, aimed at front-end developers who know they want something snappier and need to see what that looks like before writing a transition.
- The page is the product: each curve is drawn as an animated preview beside its value, so you choose by watching the motion rather than reading control points.
- The content lives in src/easings.yml and per-locale YAML under i18n/, so a new translation is a copy-and-translate job, not a code change.
- The surface area is small: the tree is Pug templates and TypeScript with no framework, and sw.js plus a web manifest suggest the page keeps working offline after one visit.
- Bounce and elastic are not a single cubic-bezier. The tree puts them in keyframe CSS under src/animation, so copying a timing value for those two will not reproduce the curve shown on the page.
- Nothing is packaged for install. Reusing the functions in a project means copying values out by hand, since there is no JSON or npm export to pull from.
- The README covers setup and translation but not where the curve values came from or how bounce and elastic were tuned, so the page is the only evidence.
- With about fifty locale files, nothing in the repo says how to notice when en.yml changes and the other translations fall behind.