Staggered Text Scroll Reveal

This is a Staggered Text Scroll Reveal. It parses structural typography into independent animated lines. Its function is to pace the reader’s attention, transforming static paragraphs into dynamic narrative elements triggered by viewport intersection.

Specs

• Weight: ~130 KB (Dependencies: GSAP Core, ScrollTrigger, Lenis, SplitType).
• Performance: High during scroll. Animations rely strictly on hardware-accelerated translate3d. [!] The resize logic lacks a proper DOM cleanup routine (SplitType.revert()), causing wrapper duplication if the window is resized repeatedly.
• Theming / Customization: Controlled by CSS fluid typography limits (max(24px, 3vw)). Timing is adjusted via GSAP’s stagger and ease parameters.
• Responsiveness: Fluid. Integrates ResizeObserver to theoretically recalculate text splits organically when the viewport changes, preventing broken line wraps.
• Web APIs: Resize Observer API.
• Graceful Degradation: [!] If JavaScript fails, the .line elements remain stuck at translate3d(0, 100%, 0) due to CSS, rendering the text completely invisible. A .no-js fallback reset is mandatory. Screen reader accessibility is also compromised by split DOM nodes.

Anatomy

• HTML: Minimal semantic <p class="text-reveal"> structures wrapped in structural layout sections.
• CSS (SCSS): Prepares the stage. It dictates the fluid font sizing and establishes the .line-wrapper mask (overflow: hidden) alongside the initial hidden state of the text string.
• JS: The logic controller. SplitType dissects the text nodes. GSAP handles the intersection observation and timeline stagger. Lenis overrides native browser scrolling. ResizeObserver monitors layout shifts.

Logic

The integration of ResizeObserver paired with a custom debounce function attempts to keep the text grid flawless across varying device dimensions.

const resizeObserver = new ResizeObserver(
  debounce(([entry]) => {
    setTextRevealAnimations();
  }, 500)
)

When the browser window resizes, text strings naturally break onto new lines differently. Without an observer, the GSAP ScrollTrigger would fire on outdated div dimensions, cutting words horizontally in half. The 500ms debounce prevents CPU thrashing during active resizing, forcing the script to recalculate the split structure only when the user finishes dragging the window.

Feel

Clean and rhythmic. As you scroll, sentences rise from invisible baselines with mechanical precision. The easing is deliberate, slowing precisely at the peak of the movement. Combined with the Lenis smooth scroll inertia, reading becomes a kinetic, interactive process rather than passive consumption.