# Scroll Scene #1

### Component Structure

* **COPY WRAPPER (div)**: A container that wraps around the entire Scroll Scene #1, providing a structured environment for the component.
* **SC1 COMPONENT (section)**: The primary section that serves as the visual stage for the scroll scene, identified by `sc1__component`, it's set to fill the viewport height and center its content.
* **SC1 IMAGE WRAPPERs (block)**: Two sets of `sc1__img-wrapper`, differentiated by their child positioning (odd and even), hold the images in a row formation, enabling the scroll-triggered animation effect.
  * **SC1 IMAGEs (image)**: Individual images within each wrapper, marked by `sc1__img`, which will move based on the scroll animations applied.

### Animation Structure

**SC1 - Scroll** animation details the behavior of the images upon scrolling:

* **Odd Images Animation**: Targets `.sc1__img-wrapper:nth-child(odd)` elements, moving them from their original position to `-100%` on the x-axis, simulating a leftward slide-out effect.
* **Even Images Animation**: Affects `.sc1__img-wrapper:nth-child(even)` elements, initially positioned at `-100%` and moving to `0%` on the x-axis, creating a rightward slide-in effect as the user scrolls.