# Custom Easing Curves in the Skills Repository: CSS Motion Tokens Explained

> Discover custom easing curves like --ease-out in the emilkowalski/skills repository. Enhance UI interactions with refined CSS motion tokens.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: deep-dive
- Published: 2026-08-08

---

**The emilkowalski/skills repository provides three custom easing curves—`--ease-out`, `--ease-in-out`, and `--ease-drawer`—defined as CSS custom properties to replace default browser easings with more refined motion for UI interactions.**

The emilkowalski/skills repository serves as a curated collection of design patterns and implementation standards for building polished user interfaces. Within its motion design system, these **custom easing curves** function as shared tokens that standardize animation timing across components, replacing the default CSS easing functions that the documentation notes are "too weak" for production UI work.

## The Three Custom Easing Curves

The repository defines exactly three easing tokens, each targeting specific interaction patterns. These are not arbitrary values but carefully selected cubic-bezier functions optimized for interface motion.

### --ease-out for UI Feedback

The `--ease-out` curve uses a cubic-bezier definition of `cubic-bezier(0.23, 1, 0.32, 1)`. This produces a strong ease-out effect that accelerates quickly and decelerates slowly, making it ideal for **button press feedback**, entrance animations, and any interaction where elements need to snap into place with a sense of weight and responsiveness.

### --ease-in-out for Balanced Motion

Defined as `cubic-bezier(0.77, 0, 0.175, 1)`, the `--ease-in-out` curve provides symmetric acceleration and deceleration. According to the source documentation in [`animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/animate/SKILL.md), this balanced curve suits **on-screen movement** such as repositioning elements, morphing shapes, or any animation where the element both starts and ends at rest within the viewport.

### --ease-drawer for Panel Animations

The `--ease-drawer` curve implements `cubic-bezier(0.32, 0.72, 0, 1)`, matching the iOS-style drawer animation also used by Ionic frameworks. As documented in [`prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/prototype/PICKER.md), this curve creates the characteristic "pull" feeling for **slide-in panels**, bottom sheets, and navigation drawers, where the animation should feel physically attached to the user's gesture.

## Source Files and Token Definitions

These easing values are not scattered throughout the codebase but centralized in specific documentation files that establish the repository's motion standards.

The primary source resides in [`review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/review-animations/STANDARDS.md) within the "Easing tokens" section, which contains the definitive variable declarations with inline comments explaining their intended use cases. The file [`animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/animate/SKILL.md) repeats these definitions under the heading "Built-in CSS easings are too weak. Use these:" for quick reference during implementation. Additionally, [`improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/improve-animations/AUDIT.md) references the same tokens in the section "Curves and durations should live as shared tokens" when discussing how to standardize animation audits across projects.

## Implementing Custom Easing in CSS

To use these curves in your stylesheets, reference the CSS custom properties directly within your `transition` or `animation` declarations. The repository assumes these tokens are available via a centralized tokens file or CSS custom property definitions.

```css
/* Import the easing tokens (adjust path to your project structure) */
@import "./path/to/tokens.css";

/* Apply strong ease-out to button interactions */
button {
  transition: transform 160ms var(--ease-out);
}

button:active {
  transform: scale(0.97);
}

/* Use balanced ease-in-out for sliding panels */
.drawer {
  transition: transform 300ms var(--ease-in-out);
}

.drawer.open {
  transform: translateX(0);
}

.drawer.closed {
  transform: translateX(-100%);
}

/* Implement iOS-style drawer motion */
.side-panel {
  transition: transform 250ms var(--ease-drawer);
}

```

## Programmatic Animation with JavaScript

When working with the Web Animations API or JavaScript-based animation libraries, you can reference the raw cubic-bezier strings directly to maintain consistency with the CSS-defined motion.

```javascript
// Using the --ease-out curve in Web Animations API
const fadeIn = element.animate(
  [
    { opacity: 0, transform: 'scale(0.95)' },
    { opacity: 1, transform: 'scale(1)' }
  ],
  {
    duration: 300,
    easing: 'cubic-bezier(0.23, 1, 0.32, 1)' // Matches --ease-out
  }
);

// Drawer animation using --ease-drawer values
const slideDrawer = drawer.animate(
  [
    { transform: 'translateX(100%)' },
    { transform: 'translateX(0)' }
  ],
  {
    duration: 250,
    easing: 'cubic-bezier(0.32, 0.72, 0, 1)' // Matches --ease-drawer
  }
);

```

## Summary

- The emilkowalski/skills repository provides **three custom easing curves** (`--ease-out`, `--ease-in-out`, `--ease-drawer`) as CSS custom properties.
- These curves are defined as specific cubic-bezier functions optimized for UI motion: `cubic-bezier(0.23, 1, 0.32, 1)`, `cubic-bezier(0.77, 0, 0.175, 1)`, and `cubic-bezier(0.32, 0.72, 0, 1)`.
- Token definitions live primarily in [`review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/review-animations/STANDARDS.md) and are referenced across [`animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/animate/SKILL.md), [`improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/improve-animations/AUDIT.md), and [`prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/prototype/PICKER.md).
- Implementation works through standard CSS `var()` syntax or direct cubic-bezier strings in JavaScript animation APIs.

## Frequently Asked Questions

### What are the exact cubic-bezier values for the skills repository easing curves?

The three custom easing curves use the following precise values: `--ease-out` is `cubic-bezier(0.23, 1, 0.32, 1)`, `--ease-in-out` is `cubic-bezier(0.77, 0, 0.175, 1)`, and `--ease-drawer` is `cubic-bezier(0.32, 0.72, 0, 1)`. These values are hardcoded as CSS custom properties throughout the repository's documentation and implementation examples.

### How do I import and use these easing curves in my project?

Import the tokens via CSS `@import` or include the custom property definitions in your global stylesheet, then reference them using the `var()` function within transition or animation timing functions. For example, `transition: transform 300ms var(--ease-out)` applies the strong ease-out curve to a transform property.

### Why does the skills repository use custom easing instead of CSS defaults?

According to the documentation in [`animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/animate/SKILL.md), the built-in CSS easings like `ease-out` and `ease-in-out` are considered "too weak" for modern UI interactions. The custom curves provide more dramatic acceleration and deceleration patterns that create a sense of physical weight and responsiveness, particularly important for touch interfaces and drawer animations modeled after iOS standards.

### Where are the easing curve definitions documented?

The definitive list appears in [`review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/review-animations/STANDARDS.md) under the "Easing tokens" section. Quick reference documentation exists in [`animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/animate/SKILL.md), audit context is provided in [`improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/improve-animations/AUDIT.md) under "Curves and durations should live as shared tokens", and concrete implementation examples appear in [`prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/prototype/PICKER.md).