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

# Scroll Reveal Text

The Scroll Reveal Text block displays text that gradually reveals itself word by word as visitors scroll down the page. This creates an engaging, interactive effect where words become visible and highlighted as they scroll into view. The text stays in a fixed position while the page scrolls, and individual words light up based on scroll position. This block is perfect for creating dramatic, attention-grabbing text displays, hero sections, or highlighting important messages in a unique way.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FZJolmV5oZYPPQ1WKnIJm%2Fimage.png?alt=media&amp;token=bf2de125-0b51-4219-838b-42d48da39b17" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Navigate to the section where you want to add the button (like **Image with text**, **Media banner**, or **Popup**).&#x20;
3. Click **Add block** and select **Scroll Reveal Text**.
4. Make your changes, preview live, then click **Save**.
   {% endhint %}

***

### Settings

#### Content

* **Text**: Enter the text content that will be revealed as visitors scroll. You can use the rich text editor to format your text with bold, italic, links, and other formatting options. The text will be split into words, and each word will reveal itself based on scroll position.
* **Font type**: Choose whether your text uses heading styles (bold, larger) or body text styles (regular weight, standard size). Heading style works well for large, impactful statements, while body style is better for longer content.
* **Text Size**: Choose how large your text appears on desktop devices. Values range from 10 to 100 pixels. Larger sizes create more dramatic effects but require more scrolling space.
* **Text Size (Mobile)**: Choose how large your text appears on mobile devices. Values range from 10 to 100 pixels. You can set this smaller than desktop for better mobile viewing.
* **Text Transform**: Choose how your text is transformed. Select "None" to keep the original capitalization, "Uppercase" to make all letters uppercase, or "Lowercase" to make all letters lowercase.
* **Text Italic**: When enabled, displays your text in italic style. This adds emphasis and can create a more elegant or artistic look.

#### Effects

* **Animation Speed**: Choose how fast the text reveals as visitors scroll. Select "Fast" for quick reveals, "Medium" for a balanced speed (default), or "Slow" for a more gradual, dramatic reveal.
* **Trigger percentage**: Control where in the viewport the text reveal starts. Values range from 0% (top of viewport) to 100% (bottom of viewport). The default is 50%, which means the reveal starts when the section reaches the middle of the screen. Lower values start the reveal earlier, while higher values start it later.
* **Inactive Text Opacity**: Control how visible the unrevealed text appears. Values range from 0% (completely invisible) to 50% (semi-transparent). The default is 20%, which means unrevealed words are faintly visible. Lower values make unrevealed text more hidden, while higher values make it more visible.

***

### Tips

* Use this block for short, impactful statements rather than long paragraphs. The word-by-word reveal works best with concise, powerful text. Larger text sizes create more dramatic effects but require visitors to scroll more to see the full reveal.&#x20;
* Test different animation speeds to find what works best for your content - fast reveals are energetic, while slow reveals are more dramatic.&#x20;
* The trigger percentage lets you control exactly when the animation starts, so you can time it perfectly with other page elements.&#x20;
* Use the inactive opacity setting to balance between making unrevealed text completely hidden (more dramatic) or slightly visible (helps visitors see what's coming).

***

### Available in

{% columns %}
{% column %}
{% content-ref url="/pages/ngvmw20Bi2qqvrk8HoQv" %}
[Image with text](/docs/theme-sections-by-category/media/image-with-text.md)
{% endcontent-ref %}

{% content-ref url="/pages/wdbz2FLtTxJRNgV4HxUJ" %}
[Multirow](/docs/theme-sections-by-category/media/multirow.md)
{% endcontent-ref %}
{% endcolumn %}

{% column %}
{% content-ref url="/pages/Wmt8TDWWKKgM4L4MnFhX" %}
[Media Banner](/docs/theme-sections-by-category/banners/media-banner.md)
{% endcontent-ref %}

{% content-ref url="/pages/UGNfqaG5AipM18ieNTsI" %}
[Rich Text](/docs/theme-sections-by-category/informative/rich-text.md)
{% endcontent-ref %}
{% endcolumn %}
{% endcolumns %}