TextReveal

Direction‑based text animation triggered on scroll. The text slides in from a configurable direction (up, down, left, or right) with a blur‑to‑sharp transition. It is a high‑impact animation best used on section headings for professional landing pages.

Use Cases

• Section headings on landing/home pages (most common)
• Hero heading text with dramatic reveal
• Heading before StickyScroll sections (omit StickyScroll heading to avoid duplicates)
• Call‑to‑action section headings
• Feature section titles

Properties

text

The text to animate. Keep concise (3-10 words for best impact). Type: string.

direction

Direction the text slides in from. Type: string. Options: up, down, left, right. Default: up.

Tip: Standard – up (most common, default, works everywhere). Dramatic – left or right (slides in from side with blur, great for alternating headings). Emphasis – down (unexpected direction, draws extra attention).

tag

HTML tag for the text. Use h2 for section headings, h1 for hero only. Type: string. Options: h1, h2, h3, h4, h5, h6, p, span. Default: h2.

duration

Duration of the animation in seconds. 0.5 is snappy, 1.0 is smooth and dramatic. Type: number. Default: 0.5.

threshold

Trigger when % of element is visible (0-1). 0.3 = reveals when 30% visible. Type: number. Default: 0.3.

triggerOnce

Trigger once (true) or repeat on scroll out/in (false). Usually true. Type: boolean. Default: true.

textAlign

Text alignment. Center for section headings, left for hero. Type: string. Options: left, center, right. Default: center.

customCss

Custom CSS for styling (font-size, font-weight, padding, margin, color). Type: string.

Best Practices

• Use on 2-4 section headings per landing page for maximum impact
• Pair with ScrollReveal on the content below for cohesive flow
• Use customCss for font-size, font-weight, padding, and text-align
• When placed before StickyScroll, OMIT StickyScroll heading/subheading to avoid duplicates
• Use tag='h2' for section headings, tag='h1' only for hero
• Keep text concise — 3-10 words works best for dramatic reveals
• Alternate directions for adjacent TextReveal components (left, then right) for visual variety
• NEVER use on navigation, footers, forms, or non‑heading text

Common Mistakes

Using TextReveal before StickyScroll without omitting StickyScroll heading

Why it's a problem: Creates duplicate headings — TextReveal IS the heading

Fix: When using TextReveal before StickyScroll, omit StickyScroll heading and subheading

Using TextReveal on long paragraphs

Why it's a problem: Long text sliding in from the side looks awkward and takes too long

Fix: Keep text to 3-10 words. Use on headings only, not body text.

Using the same direction for every TextReveal on the page

Why it's a problem: Repetitive — loses visual impact after the first one

Fix: Alternate directions: first heading 'left', second 'right', third 'up' for variety