# Image Reveal #2

### Component Structure

* **IR2 - IMG CONTAINER** (Div): This is the central element of the component, designed to house the image and its masking effect. It's styled with the `ir2__img-container` class for relative positioning and overflow control, setting the foundation for the reveal animation.
  * **IR2 - IMG MASK** (Div): Utilizes the `ir2__img-mask` class to create a foreground layer that initially covers the image. This layer is set to scale horizontally from 0 to full width, revealing the image beneath it as the animation progresses.
  * **IR2 - IMG** (Image): The target image for the reveal effect, which fills the container completely thanks to the `ir2__img` class ensuring it's appropriately sized and positioned.

### Animation Structure

**IR2 - SCROLL REVEAL**

This timeline defines the scroll-triggered animation sequence for the Image Reveal #2 component, consisting of animations that gradually uncover the image as the user scrolls:

1. **Mask Reveal Animation**: Targets the `.ir2__img-mask` within the `.ir2__img-container`, scaling it horizontally from 0 (completely hidden) to 1 (fully visible) over 0.5 seconds. This animation creates the effect of the image being revealed from left to right.
2. **Image Fade-in Animation**: Before the mask starts revealing the image, the `.ir2__img` itself transitions from completely transparent (`autoAlpha: 0`) to fully opaque (`autoAlpha: 1`) in a quick 0.1-second animation. This ensures the image is ready and visible as soon as the mask begins to move.
3. **Mask Completion Animation**: Ensures that the mask scales fully across the image, solidifying the reveal effect. This last step confirms the image is entirely visible after the scroll-triggered animation.