What is easings.net?

ai/easings.net — explained in plain English

Analysis updated 2026-06-24

★ 8,588CSSAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it is
      Reference website
      Easing functions
      Visual cheat sheet
    For contributors
      Add translations
      YAML file copy
      Local dev server
    Tech
      Yarn build
      CSS animations
      YAML content
    Sponsor
      Evil Martians

mindmap root((repo)) What it is Reference website Easing functions Visual cheat sheet For contributors Add translations YAML file copy Local dev server Tech Yarn build CSS animations YAML content Sponsor Evil Martians

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Add a new language translation to the easings.net site by copying a YAML file and filling in the strings.

USE CASE 2

Run a local development server to preview UI changes before submitting a pull request to the project.

USE CASE 3

Fix or improve the visual interactive examples of easing functions shown on the live site.

What is it built with?

CSSJavaScriptYarnYAML

How does it compare?

	ai/easings.net	hubspot/offline	kognise/water.css
Stars	8,588	8,585	8,626
Language	CSS	CSS	CSS
Setup difficulty	easy	easy	easy
Complexity	1/5	1/5	1/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Run yarn install then start the dev server, no external services or API keys needed.

No license information was provided in the explanation.

So what is it?

This repository is the source code for easings.net, a reference website that helps developers choose the right easing function for animations. Easing functions control how something moves over time: whether it speeds up, slows down, bounces, or follows some other curve. The site presents these functions as a visual cheat sheet so you can quickly compare them and pick one that fits what you are building. The README is brief and focused on contributors rather than end users. It explains how to fork the project, translate the site into other languages by copying a YAML file and filling in the translations, and how to run a local development server using Yarn. The actual content of the site, meaning the explanations and interactive examples of each easing function, is not described in the README itself. The project is sponsored by Evil Martians, a software consultancy. If you are looking to use the site rather than contribute to it, the live version is at easings.net. If you want to add a translation or fix something in the code, the README points to standard GitHub contribution steps.

Copy-paste prompts

Prompt 1

How do I add a French translation to the easings.net site by copying and editing the YAML translation file?

Prompt 2

Show me how to run the easings.net development server locally using Yarn so I can preview my changes before pushing.

Prompt 3

Which easing function from easings.net should I use for a menu slide-in animation that feels smooth and natural?

Frequently asked questions