Sticky Text Reveal

Setup:

• Place this component inside a sticky stack. (Recommendations Below)

• Configure settings: Text, Color, Reveal Type, and Reveal Mode

• Done!

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: 200vh 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.

Learn More:

• Search on YouTube: “Sticky scroll Framer”, or

• Detailed Tutorial: Framer University – Sticky Scroll