Place this component inside a sticky section.
Container Stack → Height: 300vh, Position: Relative
Sticky Stack → Height: 100vh, Position: Sticky
Configure settings: Text, Color(s), Reveal Type, and Reveal Mode
Done!Note: Adjust the Container Stack height if you change Reveal Speed. For example, if Reveal Speed is set to 2, reduce Container Stack height to 200vh.
This component uses Framer’s Sticky Scroll feature. It requires two stacks:
Container Stack
Height: 300vh
Position: Relative
Sticky Stack
Height: exactly 100vh
Position: Sticky
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
Three Reveal Styles → Highlight, Mask, or Fade In
Reveal Modes → Animate by letter, word, or line
Reveal Speed Control → Adjust how fast the text appears
Blur Effect → Add subtle blur for extra style
HTML Tag Support → Choose semantic tags (p, h1, etc.) for accessibility
Easy Setup → Drop in place of regular text, no extra configuration needed