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

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, 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, 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 within the "Easing tokens" section, which contains the definitive variable declarations with inline comments explaining their intended use cases. The file 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 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.

/* 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.

// 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 and are referenced across animate/SKILL.md, improve-animations/AUDIT.md, and 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, 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 under the "Easing tokens" section. Quick reference documentation exists in animate/SKILL.md, audit context is provided in improve-animations/AUDIT.md under "Curves and durations should live as shared tokens", and concrete implementation examples appear in prototype/PICKER.md.

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