Reveal Text

Enable

Scroll-linked word-by-word text reveal. Words start dimmed and highlight sequentially as the user scrolls. Powered by Motion.js scroll().

functions.php JS module

// Add to the softedge_js_components filter:
$components[] = 'revealtext';

No SCSS import needed — styling is handled inline by the JS component.

Basic Usage

Add the class .anim-reveal-text to any text element. Each word reveals as you scroll through it.

.anim-reveal-text

We craft digital experiences that connect brands with people through thoughtful design and modern technology.

<p class="anim-reveal-text fs-4">
  We craft digital experiences that connect brands
  with people through thoughtful design.
</p>

Options

Customize colors and scroll trigger range via data attributes.

data-anim-reveal-*

Attribute Default Description data-anim-reveal-dim var(--bs-text-contrast-lower) Color of unrevealed words data-anim-reveal-active var(--bs-text-contrast-higher) Color of revealed words data-anim-offset start 0.8, end 0.3 Scroll offset range (start, end)

// custom colors
<p class="anim-reveal-text"
   data-anim-reveal-dim="rgba(255,255,255,0.2)"
   data-anim-reveal-active="var(--bs-primary)">
  Highlighted in primary color.
</p>

// custom scroll range — starts earlier, ends later
<p class="anim-reveal-text"
   data-anim-offset="start 0.9, end 0.1">
  Longer scroll range for slower reveal.
</p>

Custom Colors

Use any CSS color or variable for dim and active states.

data-anim-reveal-active Primary color

Design is not just what it looks like. Design is how it works.

<p class="anim-reveal-text"
   data-anim-reveal-active="var(--bs-primary)">
  Design is not just what it looks like.
</p>

Inline Elements

Non-text child nodes (images, SVG icons, badges) are preserved and reveal alongside words. Add data-anim-static to keep an element always visible.

data-anim-static

Inline elements without data-anim-static start at width: 0; opacity: 0 and animate in when reached.

Elements with data-anim-static are always visible and not part of the reveal sequence.

// icon reveals with the text
<p class="anim-reveal-text">
  Build something <svg class="lucide">...</svg> amazing
</p>

// icon always visible
<p class="anim-reveal-text">
  Build something <svg class="lucide" data-anim-static>...</svg> amazing
</p>

Scroll Offset

The data-anim-offset attribute controls when the reveal starts and ends relative to the viewport.

data-anim-offset

Format: start [ratio], end [ratio] — uses Motion.js scroll() offset syntax.

start 0.8 Begin reveal when element top is at 80% of viewport height end 0.3 Complete reveal when element bottom is at 30% of viewport height

// default
<p class="anim-reveal-text">...</p>

// quick reveal (short scroll distance)
<p class="anim-reveal-text" data-anim-offset="start 0.6, end 0.4">...</p>

// slow reveal (long scroll distance)
<p class="anim-reveal-text" data-anim-offset="start 0.95, end 0.05">...</p>

Accessibility

Respects prefers-reduced-motion.

prefers-reduced-motion

When reduced motion is enabled, the component does not initialize. All text remains fully visible in its default color.

On this page