Where to Find Good Easing Curves for UI Development: A Guide From the Emil Kowalski Skills Repo

The two best resources for easing curves in UI development are easing.dev and easings.co, both officially recommended by the skills repository as canonical sources for production-ready cubic-bezier presets.

Quality motion design separates polished interfaces from amateur ones. The skills repository by Emil Kowalski treats easing curves as foundational to a consistent UI motion language, with multiple skill guides pointing developers to the same vetted external collections rather than hand-rolling curves from scratch.

Recommended Easing Curve Resources

The skills repository explicitly names two curated catalogs as the go-to sources for easing curves:

• easing.dev — A searchable database of popular easing presets with copy-ready values.
• easings.co — Visual previews paired with CSS code snippets for immediate use.

Both sites are referenced repeatedly across the repository's motion standards and animation skill guides.

Where These Recommendations Appear in the Source

Review Animations Standards

In skills/review-animations/STANDARDS.md, the authors establish a clear rule: "Find curves at easing.dev or easings.co — don't hand-roll from scratch"【/skills/review-animations/STANDARDS.md#L29-L38】. This file serves as the central motion guidelines document for the repository.

Animation Skill Guide

The skills/animate/SKILL.md guide reinforces the same recommendation: "Use these: … Need a curve that isn't here? Take it from easing.dev or easings.co"【/skills/animate/SKILL.md#L104-L112】. This practical guide covers implementation patterns and deliberately defers to these external resources for curve discovery.

Design Engineering Skill

In skills/emil-design-eng/SKILL.md, a dedicated "Easing curve resources" section lists both URLs alongside concrete cubic-bezier examples【/skills/emil-design-eng/SKILL.md#L123-L124】.

How to Apply Easing Curves From These Resources

Once you've selected a curve from easing.dev or easings.co, integrate it using standard CSS or the Web Animations API.

CSS Transition Example

/* Smooth "strong" ease-out curve sourced from easing.dev */
.button {
  transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
}

CSS Custom Property Approach

:root {
  --easing-enter: cubic-bezier(0.4, 0, 0.2, 1); /* Standard ease-out */
}

.dialog {
  animation: slide-in 0.3s var(--easing-enter);
}

JavaScript Web Animations API

// Retrieve easing from CSS custom property and apply via WAAPI
const easingEnter = getComputedStyle(document.documentElement)
  .getPropertyValue('--easing-enter')
  .trim();

element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 250, easing: easingEnter }
);

Key Skills Repository Files for Motion Design

File	Purpose
skills/review-animations/STANDARDS.md	Central motion guidelines; canonical reference for easing curve sources
skills/animate/SKILL.md	Practical animation implementation patterns
skills/emil-design-eng/SKILL.md	Design engineering practices with concrete curve examples

Summary

• easing.dev and easings.co are the officially endorsed resources for easing curves in the skills repository.
• The skills/review-animations/STANDARDS.md file explicitly prohibits hand-rolling curves in favor of these vetted sources.
• Copy cubic-bezier values directly from either site into CSS transition-timing-function, animation-timing-function, or the Web Animations API easing property.

Frequently Asked Questions

What makes easing.dev and easings.co better than creating custom curves?

According to the skills repository's skills/review-animations/STANDARDS.md, these sites offer "battle-tested" curves that have been refined through real-world use. Hand-rolled curves often introduce subtle timing issues that feel "off" to users, whereas the curated collections prioritize perceptual smoothness and accessibility.

Can I use these easing curves in JavaScript frameworks like React or Vue?

Yes. The cubic-bezier values exported from easing.dev and easings.co are environment-agnostic. Use them in CSS-in-JS libraries, Framer Motion, Vue <Transition> components, or any system that accepts standard timing functions.

Does the skills repository provide any pre-selected curves I can use immediately?

The skills/emil-design-eng/SKILL.md file includes specific examples like cubic-bezier(0.77, 0, 0.175, 1) for strong ease-out effects. These serve as starting points, with the documentation directing you to the external resources when you need variants.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}