Split Staggered Reveal Cards

This Split Staggered Reveal Card creates a dramatic, cinematic effect suitable for portfolios or featured content sections. Upon interaction, the background image recedes while two semi-transparent overlays slide in to create a high-contrast backdrop. Simultaneously, the title and description animate in with a precise staggered delay - letters for the title and words for the paragraph - powered by CSS variables.

Core Technique

The effect combines CSS pseudo-elements for the background with a JavaScript helper library for the text.

1. Split Background: The card uses ::before and ::after to create two distinct overlays. Each takes up 50% of the height. By setting a transition-delay on the ::after element, we get the “split” wiping effect.
2. Text Indexing: The Splitting.js library breaks the text into <span> elements and assigns a CSS variable index (e.g., --char-index or --word-index) to each.
3. Calculated Delays: Instead of writing dozens of keyframes, we calculate the transition-delay dynamically in CSS based on the index provided by JS.

/* Dynamic delay calculation based on JS index */
h2 .char {
  /* Base delay + (Index * Stagger Time) */
  transition-delay: calc(0.1s + var(--char-index) * var(--title-stagger));
}

p .word {
  transition-delay: calc(0.1s + var(--word-index) * var(--text-stagger));
}

Customization

The animation physics and colors are exposed as CSS variables, making them easy to tweak without touching the complex logic.

:root {
  /* Speed of the background overlay slide */
  --cover-timing: 0.5s; 
  
  /* Delay between the top and bottom overlay panels */
  --cover-stagger: 0.15s;
  
  /* Speed of text appearance */
  --text-timing: .75s;
  
  /* Default highlight color (overridden per card) */
  --highlight: white;
}

/* Per-card customization */
.card:nth-of-type(1) {
  --highlight: coral;
}

Tips

1. Dependency Requirement: This snippet requires Splitting.js to function correctly. Without it, the text will appear all at once (or stay hidden depending on your fallback CSS). Ensure you include the script and initialize it: Splitting();

2. Accessibility (Keyboard Focus): The HTML includes tabindex="0" on the .card. This is excellent practice. It allows keyboard users to tab to the card and trigger the :focus state, revealing the content just like a mouse hover.

/* Ensures animation works for both mouse and keyboard users */
.card:hover,
.card:focus {
  /* Animation styles */
}