> 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/fixed-scroll-reveal-text.md).

# Fixed Scroll Reveal Text

The Fixed Scroll Reveal Text section shows a short line of text that stays fixed in the viewport while the visitor scrolls. As they scroll through a tall area, individual words in the phrase are revealed (or highlighted) one by one, creating a simple scroll-driven effect. The section uses a tall scroll track so the reveal is tied to scroll position. It works well for a single punchy phrase or tagline and fits between other sections (e.g. below a hero or above a grid). 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%2F6ipuxjTUhsUGZssYiFng%2Fimage.png?alt=media&amp;token=8b8a7925-7847-48e4-8f00-b61236039a38" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Fixed Scrolling 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 as the user scrolls. Plain text; no HTML.

#### Style

* **Font type**: **Heading** (uses heading font) or **Body** (uses body font).
* **Text Size**: Font size on desktop (10–100 px). The value is used to set the text size.
* **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

* **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 much scroll is needed for the full reveal: **Fast** (less scroll), **Medium**, or **Slow** (more scroll). This also affects the height of the scroll track.
* **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

* **Inactive Text Opacity** around 10–20% keeps inactive words visible but clearly dimmed; 0% hides them until they activate.
* **Animation Speed** controls both how quickly words light up and how tall the section is; slower = taller section and a longer scroll to see the full reveal.
* **Content Width** “Page-width” or “S”/“M”/“L” keeps the line from stretching too wide on large screens.

***

### 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.