# How `clip-path` Is Used as an Animation Tool in the Skills Repository

> Discover how clip-path animates reveals in emilkowalski/skills with asymmetric timing and declarative masking. Learn to create hardware-accelerated animations without layout work.

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

---

**`clip-path` powers hardware‑accelerated reveal animations across the Skills repository through asymmetric timing, declarative masking, and reusable patterns that avoid layout work.**

The `emilkowalski/skills` treat `clip-path` as a first‑class animation property alongside `transform`, `opacity`, and `scale`. Rather than manipulating dimensions or using complex transform tricks, authors animate four inset values to "eat" into elements from any side—delivering 60fps motion without triggering layout or paint.

## Why `clip-path` for Animation

The repository positions `clip-path` as the **sanctioned fourth animatable property** for UI motion. According to [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md), it is the only property beyond `transform` and `opacity` explicitly allowed for component animations.

Three characteristics make this choice deliberate:

- **GPU‑only rendering** – The browser composites `clip-path` changes directly on the GPU, eliminating main‑thread work
- **Zero layout impact** – Unlike `width`, `height`, or `margin`, inset animations never force recalculation of surrounding elements
- **Declarative masking** – A single `inset(t r b l)` rule replaces imperative JavaScript or multi‑property CSS sequences

## `clip-path` Patterns and Timings

### Standard Definition Layer

The foundation lives in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) (lines 106‑108), which codifies `clip-path: inset()` as the canonical reveal mechanism. The standard mandates **asymmetric timing**: press actions use slow, deliberate curves while release actions snap back instantly.

| Action | Duration | Easing | Purpose |
|--------|----------|--------|---------|
| Press (hold) | 2s | `linear` | Build deliberate feedback loop |
| Release | 200ms | `ease‑out` | Quick, responsive completion |

### Design‑Engineering Guidance

[`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) (lines 994‑1005) translates standards into implementable rules. The skill explains the inset syntax, documents the hidden→visible state pair, and attaches exact timing specifications for press versus release interactions.

## Practical `clip-path` Animation Recipes

### Press‑and‑Hold Delete Overlay

A common pattern from [`skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/RECIPES.md) (lines 203‑229) demonstrates deliberate asymmetric timing:

```css
/* Base: overlay fully clipped on the right */
.overlay {
  background: var(--danger);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 200ms ease-out;   /* release: fast */
}

/* While held: full reveal over 2 seconds */
.button:active .overlay {
  clip-path: inset(0 0 0 0);
  transition: clip-path 2s linear;        /* press: slow & deliberate */
}

```

The `inset(0 100% 0 0)` value clips 100% from the right edge. When activated, animating to `inset(0 0 0 0)` reveals the overlay left‑to‑right.

### Tab Color Transition Without Flicker

[`RECIPES.md`](https://github.com/emilkowalski/skills/blob/main/RECIPES.md) uses `clip-path` to cross‑fade tab states without repainting text:

```html
<div class="tabs">
  <ul class="tabs__list tabs__list--copy">
    <li class="tab active">Home</li>
    <li class="tab">Profile</li>
  </ul>
  <ul class="tabs__list">
    <li class="tab">Home</li>
    <li class="tab">Profile</li>
  </ul>
</div>

```

```css
.tabs__list--copy {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  clip-path: inset(0 calc(100% - var(--active-tab-width)) 0 0);
  transition: clip-path 250ms var(--ease-in-out);
}

[data-active-tab="1"] { --active-tab-width: 80px; }
[data-active-tab="2"] { --active-tab-width: 90px; }

```

The duplicate list carries the "active" styling. `clip-path` masks everything except the currently selected tab, creating seamless color transitions without perceptible state changes.

### Scroll‑Reveal Image Animation

A viewport‑triggered pattern combining `clip-path` with `IntersectionObserver`:

```css
.reveal-on-scroll {
  clip-path: inset(0 0 100% 0);      /* hidden from bottom */
  transition: clip-path 600ms var(--ease-in-out);
}

.reveal-on-scroll.is-visible {
  clip-path: inset(0 0 0 0);
}

```

```javascript
const observer = new IntersectionObserver(
  entries => {
    entries.forEach(e => 
      e.target.classList.toggle('is-visible', e.isIntersecting)
    );
  },
  { rootMargin: '-100px' }
);

document
  .querySelectorAll('.reveal-on-scroll')
  .forEach(el => observer.observe(el));

```

The `inset(0 0 100% 0)` clips 100% from the bottom. As the element enters viewport, the animation reveals it upward—matching the "image reveals" guidance in the design‑engineering skill.

## Architectural Principles for `clip-path` Animations

- **Semantic class naming** – Prefer `.overlay`, `.hidden`, `.visible` over raw values to make intent explicit and audits straightforward
- **Accessibility preservation** – `clip-path` affects only visual presentation; screen readers continue to announce full content
- **Reduced motion support** – Wrap transitions in `prefers-reduced-motion` checks to respect user preferences without breaking functionality
- **Copy‑pasteable recipes** – Concrete implementations in [`RECIPES.md`](https://github.com/emilkowalski/skills/blob/main/RECIPES.md) serve as the single source of truth, pre‑vetted for performance and accessibility

## Key Source Files

| File | Role in `clip-path` Animation System |
|------|--------------------------------------|
| [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) | Defines asymmetric timing, lists `clip-path` as fourth sanctioned property |
| [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) | Provides definitive narrative, syntax explanation, visual rationale |
| [`skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/RECIPES.md) | Holds ready‑to‑use hold‑to‑delete, tab transition, scroll reveal blocks |
| [`skills/animate/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md) | Enforces architectural constraint: only `transform`, `opacity`, `scale`, `clip-path` permitted |
| [`skills/animation-vocabulary/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md) | Defines "Reveal" as `clip-path`‑driven concept for consistent terminology |

## Summary

- **`clip-path: inset()`** is the canonical reveal primitive—hardware‑accelerated and layout‑free
- **Asymmetric timing** (2s press, 200ms release) creates deliberate, responsive interactions
- **Three documented layers**—standards, skills, recipes—ensure discoverability and consistency
- **Semantic naming and accessibility** are non‑negotiable requirements in the repository
- **Five core files** define the complete `clip-path` animation system across the Skills codebase

## Frequently Asked Questions

### What makes `clip-path` better than animating `width` or `height` for reveals?

`clip-path` is GPU‑composited and does not trigger layout recalculation. According to [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), animating dimensional properties forces the browser to recalculate geometry and paint—the main causes of jank. `clip-path` bypasses both phases entirely.

### Why does the Skills repository use 2 seconds for press but only 200ms for release?

The asymmetric timing serves user psychology. The long `2s linear` press builds a deliberate feedback loop for destructive actions like hold‑to‑delete. The short `200ms ease‑out` release feels instantly responsive. This pattern is codified in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) as a universal rule for press‑versus‑release animations.

### Can `clip-path` animations cause accessibility problems?

No—`clip-path` affects only visual presentation and does not alter the accessibility tree. The repository explicitly pairs `clip-path` with `prefers-reduced-motion` media queries in [`skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/RECIPES.md) so users who disable motion still receive equivalent functionality through instant state changes.

### Where can I find copy‑pasteable `clip-path` animation code?

All production‑ready patterns live in [`skills/animate/RECIPES.md`](https://github.com/emilkowalski/skills/blob/main/skills/animate/RECIPES.md) (lines 203‑229). The file includes hold‑to‑delete overlays, tab color transitions, scroll reveals, and comparison sliders—each vetted for GPU performance and accessibility compliance.