> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/text/scroll-reveal-text.md).

# Scroll Reveal Text

The Scroll Reveal Text section displays a line of text that stays fixed in the viewport while the visitor scrolls. As they scroll, words in the phrase are revealed (highlighted) one by one, creating a scroll-driven effect. You control the **height** of the scroll area and the **viewport position** where the reveal starts (trigger percentage). The section supports rich text so you can add basic formatting. It works well for a single phrase or tagline between other sections. The section is disabled in the header and aside.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FD4MzmRcPH0oChqLlxVad%2Fimage.png?alt=media&amp;token=5a1d4204-268b-406e-8ef9-c48182c938a7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Scrolling Reveal Text**.
3. Make your changes, preview live, then click **Save**.
   {% endhint %}

### Settings

#### Content

* **Text**: The phrase or sentence that will be revealed word by word. Rich text is supported (e.g. bold, italic, line breaks).

#### Style

* **Font type**: **Heading** (uses heading font) or **Body** (uses body font).
* **Text Size**: Font size on desktop (10–100 px).
* **Text Size (Mobile)**: Font size on mobile (10–100 px).
* **Text Transform**: **None**, **Uppercase**, or **Lowercase**.
* **Text Italic**: When enabled, the text is displayed in italics.

#### Layout

* **Section Height**: Height of the scroll area in viewport units (20–100 vh). The text reveal runs while the user scrolls through this height. The sticky content stays centered in the viewport.
* **Content Width**: Maximum width of the text block: **Full-width**, **Page-width**, **L**, **M**, or **S**.
* **Color scheme**: Section background and text colors.

#### Effects

* **Animation Speed**: How quickly words are revealed as the user scrolls: **Fast**, **Medium**, or **Slow**.
* **Trigger percentage**: Viewport position where the reveal starts (0% = top of viewport, 100% = bottom). For example, 50% means the reveal begins when the section center reaches the middle of the screen.
* **Inactive Text Opacity**: Opacity of words that are not yet “active” (0–50%). Active words are shown at full opacity.

#### Padding

* **Top**: Space above the content area (0–100 px, step 4).
* **Bottom**: Space below the content area (0–100 px, step 4).

***

### Tips

* **Section Height** defines how much the user must scroll to see the full reveal; a larger value (e.g. 100 vh) gives a longer, slower reveal.
* **Trigger percentage** at 50% starts the effect when the section is centered; lower values start it earlier, higher values later.
* **Inactive Text Opacity** around 10–20% keeps inactive words visible but dimmed; 0% hides them until they activate.

***

### Scroll Reveal Text vs Fixed Scroll Reveal Text

**Scroll Reveal Text** and **Fixed Scroll Reveal Text** both show a line of text that reveals word by word as visitors scroll. The main differences:

* **Scroll Reveal Text** lets you choose how tall the section is and when the effect starts. You can use **rich text** (bold, italic, etc.). Pick this if you want to control the length of the scroll and the exact moment the words start appearing.
* **Fixed Scroll Reveal Text** is simpler: you only set the **animation speed** (fast, medium, or slow). The section height is automatic and the text is plain (no formatting). Pick this if you want a quick setup with fewer options.