# How to Create Cohesive Animation Experiences that Match Component Personality

> Create cohesive animation experiences by mapping animation properties to component personalities. Ensure motion aligns with user expectations and interaction frequency for seamless UI.

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

---

**Use a layered standards system that maps animation properties to predefined component personalities, ensuring motion aligns with user expectations and interaction frequency.**

The **Skills** repository by emilkowalski provides an opinionated workflow for crafting cohesive animation experiences in web interfaces. Through a collection of Markdown-based skill files, it establishes concrete standards for easing curves, durations, and physical rules that ensure animations respect both component personality and performance constraints.

## Understanding the Animation Standards Architecture

The repository organizes animation knowledge into four interconnected layers. According to the source code in `emilkowalski/skills`, this architecture ensures every animation decision traces back to documented rules.

### Core Standards and Easing Definitions

The canonical source of truth resides in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md). This file defines concrete values for easing curves, durations, and spring configurations that govern all motion decisions.

Key specifications include:

- **Easing tokens** defined as CSS custom properties (lines 31-35):
  ```css
  :root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  }
  ```

- **Duration hierarchies** based on interaction type, with button feedback targeted at 100-160ms (lines 43-44)

- **Physical constraints** prohibiting animations like `scale(0)` and enforcing GPU-friendly properties (`transform` and `opacity` only)

### Component Personality Categories

The standards recognize two primary personality archetypes that drive cohesion (lines 85-88 in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md)):

- **Playful**: Used for onboarding toasts and celebratory interactions, characterized by slightly longer durations (200ms+) and subtle bounce in easing curves
- **Crisp**: Reserved for dashboard elements and high-frequency actions, utilizing fast feedback (120ms) and linear precision

## Mapping Frequency to Animation Delight

Before implementing any animation, consult the **frequency matrix** defined in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) (lines 5-12). This matrix determines whether an interaction merits visible motion:

- **Low-frequency or first-time interactions**: Full animation permitted to create delight
- **High-frequency actions**: Must remain invisible or extremely subtle to avoid fatigue

This frequency-based approach ensures that cohesive animation experiences do not hinder usability in high-throughput interfaces.

## Implementing Personality-Driven Motion

### Selecting Easing and Duration by Context

The standards prescribe a strict hierarchy for easing selection:

1. **Enter/exit animations**: Use `ease-out` (`--ease-out`)
2. **Moving elements**: Use `ease-in-out` 
3. **Hover states**: Use standard `ease`

Apply these patterns through personality-aware CSS:

```css
/* Base button with standard easing */
.button {
  transition: transform 160ms var(--ease-out), 
              opacity 160ms var(--ease-out);
}

/* Playful variant for onboarding */
.button.playful {
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.45, 1.2);
}

/* Crisp variant for data dashboards */
.button.crisp {
  transition-duration: 120ms;
}

```

### Enforcing Interruptibility

For rapidly-triggered UI elements, prefer CSS transitions or the Web Animations API (WAAPI) over keyframe-only animations. The *Interruptibility* section in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) (lines 77-86) mandates that animations must re-target their current state when interrupted, preventing jarring resets.

Implement interruptible toasts using CSS transitions:

```css
.toast {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 400ms var(--ease-out),
              transform 400ms var(--ease-out);
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

```

When the toast is dismissed, the transition reverses smoothly from its current position rather than jumping.

### Physical Correctness with WAAPI

For complex gestures like drag-to-dismiss, use WAAPI with the standard easing curves defined in lines 65-71 of [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md):

```javascript
const animation = element.animate(
  [{ transform: 'translateX(0)' }, 
   { transform: 'translateX(100%)' }],
  {
    duration: 500,
    easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
    fill: 'forwards'
  }
);

```

This ensures spring configurations match the repository's physical rules while maintaining GPU acceleration.

## Audit and Review Workflow

### The Review Process

The [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) file defines a structured review process that evaluates code diffs against ten non-negotiable standards. When reviewing animations, the skill outputs a markdown table of findings referencing specific violations in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md).

For larger codebases, [`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md) conducts comprehensive audits using the checklist in [`skills/improve-animations/AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/AUDIT.md). This audit evaluates:
- Consistency with personality categories
- Adherence to frequency guidelines
- Physical correctness of transforms
- Reduced motion compliance

### Creating Implementation Plans

Follow the [`skills/improve-animations/PLAN-TEMPLATE.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/PLAN-TEMPLATE.md) format when documenting animation improvements. Each plan must contain:
- Exact file paths for modification
- Code snippets with specific cubic-bezier values from [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md)
- Spring configurations for physics-based motion
- Accessibility considerations including `prefers-reduced-motion` handling

### Respecting Accessibility Constraints

All animation plans must include reduced-motion fallbacks as specified in lines 61-67 of [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md):

```css
@media (prefers-reduced-motion: reduce) {
  .animated {
    transition: none;
    animation: none;
    opacity: 1;
  }
}

```

This ensures cohesive animation experiences remain accessible to users with vestibular disorders.

## Summary

- **Define personality first**: Classify components as playful or crisp before selecting animation parameters, referencing the cohesion standards in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) (lines 85-88)
- **Check interaction frequency**: Consult the frequency matrix (lines 5-12) to determine if animation should be visible or suppressed
- **Use tokenized easing**: Implement CSS custom properties for `--ease-out`, `--ease-in-out`, and `--ease-drawer` as defined in lines 31-35
- **Prioritize interruptibility**: Choose CSS transitions or WAAPI over keyframes for dynamic UI elements (lines 77-86)
- **Follow the audit workflow**: Use [`review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/review-animations/SKILL.md) for diff reviews and [`improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/improve-animations/SKILL.md) with [`AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/AUDIT.md) for full codebase assessments
- **Include accessibility**: Always implement `prefers-reduced-motion` media queries (lines 61-67) and avoid animating non-GPU properties

## Frequently Asked Questions

### How do I choose between playful and crisp animation personalities?

**Classify the component based on user context and interaction frequency.** Playful personalities suit low-frequency, celebratory moments like onboarding toasts, utilizing bouncier easing (200ms duration). Crisp personalities fit high-frequency dashboard interactions requiring immediate feedback (120ms duration). The [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) file (lines 85-88) defines these categories specifically to maintain cohesion across your interface.

### Why does the Skills repository prohibit animating `scale(0)`?

**Physical correctness prevents visual discontinuities and performance issues.** Animating to `scale(0)` causes elements to vanish abruptly, breaking the user's spatial model. The standards in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) require maintaining visibility through opacity transitions or using `scale(0.01)` minimums, ensuring transforms remain GPU-accelerated and mathematically continuous.

### What is the difference between the review-animations and improve-animations skills?

**The scope and depth of analysis differ significantly.** The `review-animations` skill (defined in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md)) evaluates specific code diffs against the ten non-negotiable standards, outputting immediate findings. The `improve-animations` skill (defined in [`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md)) conducts comprehensive codebase audits using [`AUDIT.md`](https://github.com/emilkowalski/skills/blob/main/AUDIT.md) and generates prioritized implementation plans via [`PLAN-TEMPLATE.md`](https://github.com/emilkowalski/skills/blob/main/PLAN-TEMPLATE.md) for systematic refactoring.

### How do I handle animations for users with motion sensitivity?

**Implement reduced-motion fallbacks using the patterns in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) (lines 61-67).** Wrap all animation properties in `@media (prefers-reduced-motion: reduce)` queries that disable transitions and animations while preserving static visual cues. This ensures your cohesive animation experiences degrade gracefully without sacrificing functionality for users requiring minimal motion.