Wipe transitions and masked reveals (underused CSS tricks)

clip-path is the most expressive CSS property nobody learns in their first three years on the platform. It can do every transition you remember from television — the diagonal wipe, the iris-in, the bar-wipe — in two lines of CSS. No JS, no library, no framework.

Here are six clip-path wipes I use in production, the timing each needs, and when to reach for which.

What clip-path actually does

clip-path defines a region of an element that is visible. Anything outside the region is invisible (not removed — just not rendered). The region can be an inset, a circle, a polygon, an ellipse, or an SVG path.

Animate the region, and the element appears to wipe in or out. Because clip-path is GPU-accelerated, it stays at 60fps on every device that matters.

Wipe 1: linear (left-to-right)

The default. The content reveals from left to right.

.front { clip-path: inset(0 100% 0 0); transition: clip-path 1s ease-out; }
.front.in { clip-path: inset(0 0 0 0); }

When to use: most of the time. The linear wipe is invisible if you do not pay attention to it; that is often the point.

Wipe 2: diagonal

A polygon that sweeps in at an angle. Reads as more energetic than linear.

clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);

Animate the polygon's right-edge x-coordinate from 0 to 100%. The angle stays constant; only the extent changes.

When to use: B-roll between two action shots, sports content, anything that wants "momentum."

Wipe 3: iris

A shrinking circle. The classic "ending" wipe — used at the end of Looney Tunes cartoons for exactly this reason.

clip-path: circle(70% at 50% 50%);
/* animate to: */
clip-path: circle(0% at 50% 50%);

When to use: end of sequences, final reveals, jokes with a "punchline" structure.

Wipe 4: bar wipes (venetian blinds)

Multiple parallel strips that wipe in alternating directions. Cinema's "broadcast-style" transition.

clip-path: polygon(
  0% 0%, var(--w) 0%, var(--w) 16.6%, 0% 16.6%,
  100% 16.6%, calc(100% - var(--w)) 16.6%, calc(100% - var(--w)) 33.3%, 100% 33.3%,
  /* ... continues for each strip */
);

When to use: title sequences, broadcast-style intros, anything that wants to announce the transition.

Wipe 5: vertical reveal

Like the linear wipe, but top-to-bottom. Smaller in effect, larger in elegance.

clip-path: inset(100% 0 0 0);
/* animate to: */
clip-path: inset(0 0 0 0);

When to use: text reveals, lower-thirds appearing, any content that should feel like it is "growing" into the frame.

Wipe 6: circle-out

The inverse of iris. A circle that grows from the center to fill the frame.

clip-path: circle(0% at 50% 50%);
/* animate to: */
clip-path: circle(75% at 50% 50%);

When to use: opening reveals, "big idea" hero shots, anything where you want to imply the content is bursting into view.

The CodeTabs view

The complete CSS and the result side by side:

/* Wipe 1: linear */
.linear { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.16, 1, .3, 1); }
.linear.in { clip-path: inset(0 0 0 0); }

/* Wipe 3: iris */
.iris { clip-path: circle(70% at 50% 50%); transition: clip-path 1.2s ease-in-out; }
.iris.in { clip-path: circle(0% at 50% 50%); }

/* Wipe 6: circle-out */
.circle-out { clip-path: circle(0% at 50% 50%); transition: clip-path 1.2s cubic-bezier(.7, 0, .3, 1); }
.circle-out.in { clip-path: circle(75% at 50% 50%); }

Timing rules

A wipe is its timing. Three rules I keep returning to:

1. 600-1000ms for entrance wipes. Faster reads as a cut; slower reads as filler.
2. 300-500ms for exit wipes. Exits should always be faster than entrances.
3. Pair every wipe with motion in the incoming content. A wipe that reveals static content feels half-finished. The wipe arrives, the content within it also has a tiny motion (scale 0.95 → 1, opacity 0.8 → 1).

Compare: with and without a wipe

The same cut, with and without a wipe between shots. The difference is small in any single moment; large across thirty seconds of content.

Render to MP4

Same drill: open in the playground, set the duration to a multiple of your wipe cycle, render. The output is a deterministic MP4 with frame-perfect wipe timing.

clip-path is a quiet superpower. Two CSS properties, six transitions, no library. If you are still reaching for video editing tools to do basic wipes between HTML scenes, this is the swap to make this week. See also motion graphics in 80 lines for more on what code-driven transitions unlock.