How to Use the Scroll Reveal Image Component

1. Copy the component link.

2. Paste the copied link onto your Framer Canvas.

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

Customization Options (Right Sidebar)

4. Content Array: Create a mixed array of text and images

   • For each item, choose type "Text" or "Image"

   • For text items: Enter your text content

   • For image items: Upload or select an image and add alt text

5. Layout Settings:

   • Items: Set number of items per row (1-10, default: 3)

   • Gap: Set horizontal spacing between items (0-100px, default: 10px)

   • Rows Gap: Set vertical spacing between rows (0-100px, default: 10px)

   • Padding: Adjust padding around the entire component

6. Style Settings:

   • Font: Choose font style, weight, size, and line height

   • Text Color: Set color for text elements

   • Image Radius: Adjust border radius for images (default: 10px)

   • Fill: Set background color for the component

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

8. Transition: Configure animation properties for the image reveal effect

9. Preview your component by scrolling through your prototype to see how text fades in and images expand into view based on scroll position.

10. For optimal results, place this component in a scrollable frame and experiment with different trigger zone values and transition settings.