---
title: "Sticky Text Reveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Tamzid · Text. Static text, dynamic reveal."
canonical: "https://framer.elliotli.dev/component/sticky-text-reveal"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Sticky Text Reveal

# Sticky Text Reveal

Static text, dynamic reveal.

[View on Framer](https://framer.com/marketplace/components/sticky-text-reveal/?via=elliot-li)

![Sticky Text Reveal preview image 1](https://framer.elliotli.dev/og/component/sticky-text-reveal/3e3a9cea648391a4/1600x1200.jpg)

## Summary

Static text, dynamic reveal.

## Description

## Setup:

-   Place this component inside a **sticky stack**. (Recommendations Below)
    
-   Configure settings: **Text**, **Color**, **Reveal Type**, and **Reveal Mode**
    
-   Done!
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-qngmxiku-SnjozGzLas0XRn0RZfyhaqlNyWnnmz)

### Features

-   **Three Reveal Styles** → Highlight, Mask, or Fade In
    
-   **Reveal Modes** → Animate by letter, word, or line
    
-   **Blur Effect** → Add subtle blur for extra style
    
-   **Embedded Link** → Turn any word in the display text into a clickable hyperlink.
    
-   **HTML Tag Support** → Choose semantic tags (p, h1, etc.) for accessibility
    

### Controls:

**Delay** → Default: **0vh**.

At 0vh, the animation starts instantly. Increasing this value (e.g., 100vh) means the animation will begin only after that amount of scroll distance.

**Duration** → Default: **100vh**.

This defines how long the animation takes. At 100vh, the reveal completes over 100vh of scroll distance.

**Disappear** → Default: **No**.

When set to **Yes**, the text will disappear as you continue scrolling after it has been revealed. Same as Reveal but in reverse.

### \# Sticky Section Setup (Framer)

This component uses Framer’s Sticky Scroll feature. It requires two stacks:

1.  **Container Stack**
    
    -   Height: 2**00vh or more**
        
    -   Position: **Relative**
        
2.  **Sticky Stack**
    
    -   Height: exactly **100vh**
        
    -   Position: **Sticky**
        

These Height values are not mandatory. You can try other Height values according to your need.

Once set, the sticky stack behaves like a regular section.

![Sticky Scroll Setup](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-9psp98z0-5REYhCS5yfHKIxvRbwI1sVOXQeANrQ)Sticky Scroll Setup![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mv1kpsc6-CrSvLreXJw8FGY4UIufSYNLIno40cE)

### Learn More:

-   Search on YouTube: **“Sticky scroll Framer”, or**
    
-   Detailed Tutorial: [Framer University – Sticky Scroll](https://youtu.be/ocrFvoNTg18)
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3151

## Details

- **Author**: Tamzid
- **Published**: 2026-03-31
- **Updated**: 2026-06-24
- **Added**: 2026-03-15
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing