Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
Text✨ Premium

Clip Path Reveal

Reveals text progressively left-to-right via a CSS clip-path: inset() animation — zero JavaScript, direction and timing configurable.

CSSClip-pathReveal

You'll get access to the interactive demo with a free account.

This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Text has 56 effects, including 4 free. Explore the category →

View in catalogue Free account

3 usage examples

Portfolio hero — Main title reveal on load — Clip Path Reveal example 1

① Portfolio hero — Main title reveal on load

WhenOn page load of a portfolio site or agency landing page, when the main heading enters the scene.
WhyLeft-to-right reveal creates a cinematic print-press feel that draws attention without distracting from the message. The effect is clean and readable over any background.
SettingsDuration 0.8s, easing cubic-bezier(0.25, 1, 0.5, 1), font-size: 4rem, font-weight: 900.
Editorial article — Section heading reveal on scroll — Clip Path Reveal example 2

② Editorial article — Section heading reveal on scroll

WhenWhen a chapter heading, pull quote, or subheading enters the viewport during scroll in a long-form article.
WhyAn <code>IntersectionObserver</code> adds the class when the element becomes visible — the progressive reveal replaces a plain fade and reinforces the sense of discovery.
SettingsDuration 1s, easing ease-out, stagger delay of 0.15s per element to chain multiple headings without visual overlap.
Campaign launch — The brand name unveils like a curtain — Clip Path Reveal example 3

③ Campaign launch — The brand name unveils like a curtain

WhenOn a product launch page or event campaign, at page load, to reveal the brand name or hero tagline across a large surface.
WhyThe clip-path reveal is built for large surfaces: on text at 5 rem and above, the animation mimics a curtain opening — far more memorable than a plain fade. A 0.6 s stagger between name and tagline creates a cinematic sequence; a Replay button anchored at the bottom doubles as a call to action.
SettingsDuration 1.2s, easing cubic-bezier(0.25, 1, 0.5, 1), font-size: 5rem, font-weight: 900, 0.6s delay on the tagline for the stagger.

How it works

The reveal relies on the CSS property clip-path: inset(). The .text-clip-reveal element starts with clip-path: inset(0 100% 0 0) — the clipping rectangle covers the full width from the right side, making the text completely invisible. The clipRevealAnim keyframe animation slides this rectangle to inset(0) (no clip on any side), revealing the text from left to right.

The animation shorthand on .text-clip-reveal reads 1s ease 0s 1 normal forwards running. The forwards fill-mode is critical — it keeps the final state (inset(0), text fully visible) after the animation ends, preventing a flash back to the initial clipped state.

The mechanism is pure CSS: no JavaScript is needed for the animation itself. To replay programmatically, force a reflow by removing the class, reading offsetWidth, then re-adding it — this resets the browser's animation context.

The reveal direction is controlled by the initial clip-path value: move the 100% to any of the four inset(top right bottom left) parameters to reveal from any edge — right, left, top, or bottom.

Accessibility

  • prefers-reduced-motion: absent from code — no media query is included in the effect CSS. For broad audiences, add: @media (prefers-reduced-motion: reduce) { .text-clip-reveal { animation: none; clip-path: inset(0); } }
  • clip-path is purely visual: it does not remove text from the DOM or accessibility tree — a screen reader reads the content even while it is visually clipped.
  • Contrast: white text (#fff) on a dark background (#0a0a0f) far exceeds WCAG AA (ratio > 18:1). Verify contrast if you customise colours.
  • No keyboard interaction or focus behaviour in the effect — it is passive (CSS animation on load). No tabIndex or aria-* attributes are needed for the effect alone.
  • For scroll-triggered use (IntersectionObserver + class addition), the text is already in the accessibility tree before the class is added: no information is hidden from screen reader users.

Browser compatibility

Requires CSS clip-path — supported in all modern browsers since 2017. Zero external dependencies, zero JavaScript.

Chrome 55+✓ Full
Firefox 54+✓ Full
Safari 9.1+✓ Full
Edge 79+✓ Full
Mobile iOS✓ Full
Android Chrome✓ Full

If <code>clip-path</code> is unsupported (IE 11), text displays directly without animation — no JS errors, the page remains readable.

The code

HTML structure to paste into your page (CSS + JS available with a premium account):

index.html — structure 
<div class="demo-preview">
  <!-- .text-clip-reveal applies to any text element -->
  <span class="demo-text text-clip-reveal">YOUR TEXT</span>
</div>

<!-- Or directly on a heading -->
<h1 class="demo-text text-clip-reveal">Main title</h1>
🔒 Unlock the full code — from €2.99 the first month

Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
Direction — initial inset on .text-clip-reveal inset(0 100% 0 0) Starting side of the reveal. inset(0 0 0 100%) = right→left; inset(0 0 100% 0) = top→bottom; inset(100% 0 0 0) = bottom→top.
Duration — 1st animation value 1s Animation duration. 0.4s for a snappy feel, 2s for cinematic pacing.
Easing — 2nd animation value ease Speed curve. linear for a mechanical sweep, cubic-bezier(0.25, 1, 0.5, 1) for momentum then deceleration.
Delay — 3rd animation value 0s Delay before start. Stagger multiple headings at 0s, 0.15s, 0.3s… to create a cascade effect.
font-size on .demo-text 2.5rem Text size. Use clamp(1.5rem, 5vw, 4rem) for responsive sizing.
font-weight on .demo-text 800 Text weight. 400 for a light editorial style, 900 for maximum impact.
Replay JS — To replay without a page reload: el.classList.remove('text-clip-reveal'); void el.offsetWidth; el.classList.add('text-clip-reveal'). Reading offsetWidth forces the reflow that resets the animation context.

FAQ

Yes — the animation is entirely CSS. Just add the .text-clip-reveal class to any text element and the effect fires on load. JavaScript is only needed to replay the animation or trigger it on scroll via IntersectionObserver.
Modify the initial clip-path value on .text-clip-reveal. The syntax inset(top right bottom left) indicates which side masks the text at the start: inset(0 100% 0 0) = masked from the right (reveals left→right); inset(100% 0 0 0) = masked from the top (reveals bottom→top); inset(0 0 0 100%) = masked from the left (reveals right→left).
Yes. Omit the .text-clip-reveal class from the initial HTML and set clip-path: inset(0 100% 0 0) via an inline style or a neutral class. An IntersectionObserver then adds .text-clip-reveal when the element enters the viewport — the browser fires the animation at the exact moment of visibility.