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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/image/image-reveal-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.