Split Text Reveal on Scroll

A comprehensive collection of text reveal effects, including the popular Vertical Split, Diagonal Slice, and Horizontal Slide animations. Optimized for performance and visual impact.

Achieve cinema-quality text reveals with this versatile snippet. Whether you want a clean vertical split or a dynamic diagonal slice, this code handles it all with smooth hardware-accelerated transitions.

Included Variations

1. Vertical Split (Default): The classic, sophisticated effect where text splits horizontally.
2. Diagonal Slice: A sharper, more aggressive cut for modern branding.
3. Horizontal Slide: Text splits vertically and slides in from the sides.

Code Implementation

HTML Structure

The base implementation assumes a vertical split. Add modifier classes to change the effect.

<!-- Default Vertical Split -->
<h2 class="split-text-reveal">IMAGINE</h2>

<!-- Diagonal Slice Variation -->
<h2 class="split-text-reveal style-diagonal">SHATTER</h2>

<!-- Horizontal Slide Variation -->
<h2 class="split-text-reveal style-horizontal">DIVIDE</h2>

CSS Styles

The core logic uses clip-path to define the visible “half” of each character duplicate.

/* --- DEFAULT VERTICAL SPLIT --- */
.char-half.top {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    transform: translateY(-105%);
}

.char-half.bottom {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    transform: translateY(105%);
}

/* --- DIAGONAL VARIATION --- */
.style-diagonal .char-half.top {
    /* Transforms Top Half into Top-Left Triangle */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: translate(-50%, -50%);
}

.style-diagonal .char-half.bottom {
    /* Transforms Bottom Half into Bottom-Right Triangle */
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transform: translate(50%, 50%);
}

JavaScript

The script automatically duplicates each character into two layers (.top and .bottom) so you don’t have to manually markup your text.

// Simplified logic
const splitText = (element) => {
  const text = element.innerText;
  element.innerHTML = "";
  
  text.split("").forEach((char) => {
    // Create container
    // Create ghost (for sizing)
    // Create .top half
    // Create .bottom half
    // Append all
  });
};