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

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, 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 (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 (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 (lines 203‑229) demonstrates deliberate asymmetric timing:

/* 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 uses clip-path to cross‑fade tab states without repainting text:

<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>

.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:

.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);
}

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 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	Defines asymmetric timing, lists clip-path as fourth sanctioned property
skills/emil-design-eng/SKILL.md	Provides definitive narrative, syntax explanation, visual rationale
skills/animate/RECIPES.md	Holds ready‑to‑use hold‑to‑delete, tab transition, scroll reveal blocks
skills/animate/SKILL.md	Enforces architectural constraint: only transform, opacity, scale, clip-path permitted
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, 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 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 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 (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.

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