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.