ClipPathReveal

The ClipPathReveal text effect animates CSS clip-path inset vectors, wiping text units horizontally, vertically, or outward from the center, optionally blending opacity.

---

Horizontal Sweep Reveal

The default behavior reveals text from left to right. The direction: 'right' configuration animates the inset boundary towards the right margin.

Horizontal sweeping mask layout.

60 FPS

---

Center-Out Radial Expansion

Setting the direction parameter to 'center' animates the clipping inset symmetrically from the center coordinates outward.

EXPANSION

60 FPS

---

Vertical Wipe (Top-to-Bottom)

Setting the direction parameter to 'down' wipes text lines vertically.

First line reveals downward.

Second line follows stagger.

60 FPS

---

Custom Deceleration Easing

Applying a non-linear ease value (e.g. 'bounce.out') changes the clipping expansion profile.

BOUNCING REVEAL

60 FPS

---

Timeline Sequence Chaining

Because the helper returns a standard Timeline instance, clip-path reveals can be chained with subsequent scale or color tweens.

CHAINED SEQUENCING

60 FPS

---

API Reference

import { TextEffects } from 'animx/plugins/Text'

const tl = TextEffects.clipPathReveal(target, config)

Configuration Options

Option	Default	Description
type	'words'	Slicing unit layout: 'chars', 'words', or 'lines'.
direction	'right'	Clipping path direction: 'right', 'left', 'down', 'up', or 'center'.
fade	true	Blends opacity from 0 to 1 during execution.
duration	1.0	Sweep timeline duration in seconds.
ease	'cubic.out'	Deceleration easing profile.
stagger	0.08	Delay gap between adjacent text block reveals.
revertOnComplete	false	Resets layout and removes absolute spans on complete.
paused	false	Standard playback initialization lock flag.