> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/image/image-reveal-1.md).

# Image Reveal #1

### Component Structure

* **IR1 COMPONENT** (Section): Acts as the main container for the image reveal effect, facilitating the necessary structure for animation.
* **IR1 CONTAINER** (Container): Centers the image within the component, ensuring it's appropriately aligned for the reveal effect.
  * **IR1 IMG CONTAINER** (Div): A key element in the reveal effect, employing the `ir1__img-container` class for size and overflow control. It sets the stage for the image and its masking effect.
    * **IR1 IMG MASK** (Div): Utilizes the `ir1__img-mask` class to create an overlay that will animate to reveal the image beneath. It's styled to cover the image fully at the start.
    * **IR1 IMG** (Image): The target image for the reveal, adorned with the `ir1__img` class to ensure it fits perfectly under the mask. The image is set to cover the container's area completely, ensuring no part is left uncovered initially.

### Animation Structure

**IR1 - SCROLL**

This timeline activates upon scrolling, featuring two primary animations that work in tandem to create the reveal effect:

1. **Mask Scale Animation**: Targets the `.ir1__img-mask` within the `.ir1__img-container`, initially covering the image entirely. As the user scrolls, the mask scales horizontally to zero, gradually revealing the image underneath. The animation emphasizes a smooth transition, powered by the "power2.out" easing.
2. **Image Move and Scale Animation**: Concurrently, the `.ir1__img` itself is subjected to a subtle transformation, moving horizontally by "5%" and scaling up to "1.2". This slight movement and zoom effect add depth to the reveal, making the image appear to emerge from beneath the mask.