How to Use the Scroll Reveal Letters Component

1. Copy the component link.

2. Paste the copied link onto your Framer Canvas.

3. The Scroll Reveal Letters component will appear on your Canvas.

Customization Options (Right Sidebar)

4. Text: Enter the paragraph or content you want to animate. Each letter will reveal itself as users scroll.

5. Opacity Settings:

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

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

6. 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"

7. Font Settings:

   • Choose font style, weight, and family

   • Set text color

   • Adjust padding

   • Set text alignment (Left, Center, Right)

8. Preview your scroll animation by scrolling through your prototype to ensure the reveal effect matches your design requirements.

9. Adjust the trigger zone values to fine-tune when the text starts and completes its reveal animation relative to the user's scroll position.