Kinetic clip-path Text Rotator

Static text is a relic of print media. In the digital realm, typography should possess momentum and weight. This component transforms a standard headline into a kinetic event. By synchronizing rotation with advanced clipping masks, we create the illusion of text being physically “printed” or “wiped” into existence at high velocity. It is visceral, rhythmic, and designed to command attention without screaming.

Core Technique

The elegance of this solution lies in the decoupling of structure and style. We do not animate the text color directly. Instead, we orchestrate a dual-layer rendering system.

• The Ghost: The base h1 element serves as a faint guide, providing context and structure.
• The Soul: The ::after pseudo-element contains the “active” white text. Its visibility is controlled not by opacity, but by clip-path: inset(...).
• The Engine: GSAP updates CSS custom properties (--t for top, --l for left) in real-time. This dynamically slices the text visibility while simultaneously translating (xPercent) and rotating (rotate) the element, creating a seamless, fluid transition that feels physically grounded.

Customization

The motion logic is encapsulated within the GSAP timeline, making it highly tunable. You can alter the “physics” of the rotation or the speed of the wipe with minimal effort.

Adjusting the Rotation

To make the effect more subtle or more aggressive, modify the rotate property in the loop:

.to(HEADINGS[h], {
  rotate: 45, // Try 90 for extreme, 15 for subtle
  duration: 1,
})

Changing the Wipe Direction

The logic controls CSS variables --t (top) and --l (left). You can invert these to wipe from different angles.

/* In your CSS */
h1:after {
  /* Change 'inset' logic here */
  clip-path: inset(var(--t, 0) 0 0 var(--l, 100%)); 
}

Browser Support

The code relies on clip-path and CSS Variables, both of which are standard in modern browsers. GSAP ensures consistent animation performance.