Scroll Reveal Words

Scroll Reveal Words

Scroll Reveal Words

Scroll Reveal Words

Created by

Kanishak Mahendiratta

Last Updated

Feb 20, 2025

Ancient trees stand as silent witnesses to the passage of time, their rings telling stories of centuries past

How to Use the Scroll Reveal Words Component

  • Copy the component link.

  • Paste the copied link onto your Framer Canvas.

  • The Scroll Reveal Words component will appear on your Canvas.



Customization Options (Right Sidebar)

  • Text: Enter the paragraph or content you want to animate. Each word (not letter) will reveal itself as users scroll.

  • Opacity Settings:

    • Starting Opacity: Set the initial opacity of words (0-1, default: 0.1)

    • Ending Opacity: Set the final opacity of words (0-1, default: 1)

  • Trigger Zone Settings:

    • Starting Trigger: Control when animation begins (0-1, default: 0.75)

      • Value of 0.75 means: "Animation starts when the top edge of this element is 75% down the viewport height"

    • Ending Trigger: Control when animation completes (0-1, default: 0.25)

      • Value of 0.25 means: "Animation completes when the bottom edge of this element is 25% down the viewport height"

  • Font Settings:

    • Choose font style, weight, and family

    • Set text color

    • Adjust word spacing gap (default: 5)

    • Set padding around the text block

  • Preview your scroll animation by scrolling through your prototype to see how words progressively reveal themselves.

  • For best results, place this component in a scrollable frame and adjust the trigger zone values to control the timing of the reveal effect.