Place this component inside a sticky stack. (Recommendations Below)
Configure settings: Text, Color, Reveal Type, and Reveal Mode
Done!
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
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.
This component uses Framer’s Sticky Scroll feature. It requires two stacks:
Container Stack
Height: 200vh or more
Position: Relative
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.
Search on YouTube: “Sticky scroll Framer”, or
Detailed Tutorial: Framer University – Sticky Scroll
Place this component inside a sticky stack. (Recommendations Below)
Configure settings: Text, Color, Reveal Type, and Reveal Mode
Done!
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
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.
This component uses Framer’s Sticky Scroll feature. It requires two stacks:
Container Stack
Height: 200vh or more
Position: Relative
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.
Search on YouTube: “Sticky scroll Framer”, or
Detailed Tutorial: Framer University – Sticky Scroll
