# Scroll Scene #7

### Component Structure

* **SC7 COMPONENT (section):** The primary container fixed in the viewport with a class `sc7__component`, which holds the entire scene.
* **SC7 IMG CONTENT (div):** Direct child of the SC7 component, styled with `sc7__img-content`, serving as the main content area where the images are laid out.
* **SC7 IMG COL (div):** Columns within the image content area, distinguished by `sc7__img-col`, which organize the images vertically.
* **SC7 IMG WRAPPER (div):** Each image is wrapped in this div, `sc7__img-wrapper`, to apply consistent styling and animation effects.
* **SC7 IMG (image):** Individual images within the wrappers, applying a cover fit with `sc7__img` to ensure full coverage and visual impact.

### Animation Structure

**SC7 - IMG SCROLL:** A collection of animations applied to the SC7 component and its child elements to create engaging scroll-triggered effects:

* **Vertical Motion:** Odd and even image columns move in opposite directions (`y: "-10%" to "10%"` and vice versa) to add depth.
* **Scaling Effect:** The entire image content area slightly scales up (`scale: 1.1 to 1`) for a subtle zoom effect as the user starts scrolling.
* **Opacity Change:** Introduces a fade-in effect from `opacity: 0.3 to 1`, making the images emerge gracefully on scroll.


---

# Agent Instructions: 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:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/scroll-scenes/scroll-scene-7.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
