easings.net: A Visual Cheat Sheet for Easing Functions in Animation
Easing Functions Cheat Sheet
At a glance
- What is it?
- easings.net is a browser-based reference that displays every standard easing function as an interactive curve alongside copy-paste code. It is aimed at frontend developers and animators who need to pick the right acceleration curve for CSS transitions, JavaScript animations, or game motion, without deriving the math themselves.
- Who is it for?
- Use easings.net when you need a quick visual comparison of easing curves before committing to one in CSS or JavaScript code. It is not a library to import; it is a reference to visit.
- Can I use it commercially?
- Yes, with conditions. GPL-3.0 is a copyleft licence: if you distribute software that includes it, you must release that software's source code under the same licence. Running it internally without distributing it does not trigger that obligation.
- Is it still maintained?
- Yes. The repository last received commits 176 days ago.
- What is it written in?
- Mainly CSS, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 28, 2026, and from our analysis. They are not legal advice.
Editorial analysis
What Easing Functions Are and Why a Cheat Sheet Helps
An easing function maps a value from 0 to 1 (representing progress through an animation) to an output that may accelerate, decelerate, or bounce around that range. The choice of easing function determines whether a UI element slides in gently, overshoots and settles back, or snaps instantly to its destination. With dozens of named functions (easeInQuad, easeOutBounce, easeInOutElastic, and many more), it is not obvious from the name alone which curve will look right in context.
easings.net solves this by rendering each function as an animated preview alongside its formula, so a developer can compare the visual feel of options before writing any code. The repository description calls it a simple cheat sheet to help developers pick the right easing function, which is accurate. The site is hosted live at https://easings.net and the source is available under GPL-3.0.
The site covers ten easing families: sine, quadratic, cubic, quartic, quintic, exponential, circular, elastic, back (overshoot), and bounce. Each family has three variants: in (starts slow, ends fast), out (starts fast, ends slow), and in-out (starts and ends slow, fastest in the middle). Combined with a linear function, this gives roughly 31 named curves in total. The naming convention follows the pattern easeInFamily, easeOutFamily, and easeInOutFamily.
Installing and Running the Site Locally
The repository is a source-built web application. To run it locally, install the project dependencies using yarn:
yarn installThen start the development server:
yarn run startOpen localhost:1234 in a browser to see the site. The development server uses Parcel for bundling. The production build command is:
npm run buildwhich runs `NODE_ENV=production node ./scripts/build.js` as defined in package.json. The entry point is index.html at the repository root.
The package.json also defines a lint command: `eslint ./src/**/*.{ts,js} ./scripts/*.js`. The linting is separate from the build and does not run automatically during development.
How the Site Is Built: PostCSS, TypeScript, and Pug
The site uses a combination of technologies that reflect its age and scope. Templates are written in Pug. Stylesheets go through a PostCSS pipeline that includes postcss-dark-theme-class (for automatic light/dark mode toggling based on the prefers-color-scheme media query), postcss-pxtorem (converting pixel values to rem for font, line-height, letter-spacing, margin, and padding properties with a root value of 16), postcss-flexbugs-fixes to address known flexbox browser bugs, and autoprefixer.
TypeScript provides type safety in the source. The project targets modern browsers (browserslist: defaults, not ie 11, not ie_mob 11) and does not support Internet Explorer. The bundler is parcel-bundler at version 1.x.
The only runtime dependency in the package.json dependencies field is focus-visible, a polyfill for the CSS :focus-visible pseudo-class, which improves keyboard navigation accessibility by showing focus rings only when the user is navigating by keyboard. Everything else is a development dependency. This means the deployed site at https://easings.net loads no external JavaScript libraries beyond that single polyfill, keeping the page load minimal.
Internationalization: Adding a Translation
The site supports multiple languages through YAML files in the i18n/ directory. Each language file follows the RFC 3066 naming convention: the English source is i18n/en.yml. To add a new translation, the README gives a direct instruction: copy i18n/en.yml to i18n/CODE.yml (where CODE is the lowercased RFC 3066 language code for the target language, such as fr-ca for Canadian French) and translate all messages in the file.
This means contributors do not need to touch the HTML or JavaScript to add a language. The template engine reads the i18n/ files at build time and generates localized pages from the same Pug templates.
Limitations and When easings.net Is the Wrong Tool
easings.net is a visual reference, not an installable library. It shows the curves and provides formulas, but the site does not document how to use those formulas in specific frameworks or languages beyond what the interactive display conveys. A developer who wants to use easeInOutElastic in a React animation library will need to look up the exact import path in that library separately.
The site also does not cover custom or non-standard easing functions. It documents the well-known set of named functions, the sine, cubic, quint, circ, elastic, back, and bounce families, plus linear. Custom bezier curves, as used in CSS cubic-bezier(), are a distinct mechanism that the site references but does not build a visual designer around.
The GPL-3.0 license covers the source code. Any derivative work that incorporates the repository code must be released under the same license. Developers who want to embed the site rendering logic in a commercial closed-source product will need to write their own easing renderers rather than copying the source code directly.
The README does not document how to run the test suite or whether one exists. The only testing-related entry in package.json scripts is lint, which runs ESLint over the TypeScript and JavaScript source. There is no test runner configured for functional tests of the curve calculations.
Comparison with Robert Penner's Easing Equations
The standard reference for easing functions in software is Robert Penner's work, originally published as a chapter in his 2001 book on ActionScript programming. Most named easing functions, including the QuadIn, CubicOut, and BounceInOut variants that easings.net displays, trace their formulas back to Penner's equations.
The difference in approach: Penner's work is a set of mathematical formulas distributed as source code intended for embedding in projects. easings.net is an interactive visual comparison tool. Penner's equations answer the question of how to implement a specific curve in code; easings.net answers the question of which curve to pick in the first place. Both serve legitimate needs, and many developers use one to choose and the other to implement.
The last push to the repository was on 2026-04-07. The repository has no GitHub releases. The source is licensed under GPL-3.0. The project does not accept financial support through the repository itself; the README credits Evil Martians as a sponsor via a badge.
Editorial conclusion
Use easings.net when you need a quick visual comparison of easing curves before committing to one in CSS or JavaScript code. It is not a library to import; it is a reference to visit. Developers who want to embed easing logic in their codebase will still need to copy the formula or use a separate package. The source is licensed under GPL-3.0, which restricts how derivative works may be distributed; the live site at https://easings.net carries no such restriction on viewing.
Frequently asked questions
What is an easing?
An easing function maps animation progress (a value from 0 to 1) to an output that controls how a property changes over time. Instead of moving at a constant rate, an eased animation can accelerate at the start, decelerate at the end, overshoot, or bounce. The easings.net site shows each named function as an animated curve so developers can see the effect before choosing one.
What does easing mean in animation?
In animation, easing refers to changing the rate of motion so it does not proceed at a constant speed. A simple example is ease-in, where the motion starts slowly and accelerates. easings.net documents the complete set of standard named easing functions, from linear to elastic and bounce variants, with animated previews of each.
What is bounce easing?
Bounce easing simulates the behavior of an object bouncing off a surface. The easeOutBounce function, for example, overshoots its target value and bounces back multiple times before settling. The bounce effect is achieved through a piecewise formula, not physical simulation. easings.net shows the bounce curve and its in, out, and in-out variants as interactive previews.
What are the different types of easing functions?
easings.net groups easing functions into families: sine, quadratic, cubic, quartic, quintic, exponential, circular, elastic, back (overshoot), and bounce. Each family can be applied as in (starts slow), out (ends slow), or in-out (starts and ends slow). This produces roughly 30 named combinations in total.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/ai-easings-net)