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

> Discover essential easing curves for UI development. Explore recommended resources like easing.dev and easings.co from the emilkowalski skills repo for production-ready presets.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: how-to-guide
- Published: 2026-08-06

---

**The two best resources for easing curves in UI development are [easing.dev](https://easing.dev) and [easings.co](https://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](https://easing.dev)** — A searchable database of popular easing presets with copy-ready values.
- **[easings.co](https://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`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), the authors establish a clear rule: "Find curves at [easing.dev](https://easing.dev/) or [easings.co](https://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`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md) guide reinforces the same recommendation: "Use these: … Need a curve that isn't here? Take it from [easing.dev](https://easing.dev/) or [easings.co](https://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`](https://github.com/emilkowalski/skills/blob/main/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

```css
/* 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

```css
: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

```javascript
// 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`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) | Central motion guidelines; canonical reference for easing curve sources |
| [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md) | Practical animation implementation patterns |
| [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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.