# Scroll Scene #2

### Component Structure

* **COPY WRAPPER (div)**: Establishes the foundation for Scroll Scene #2, encapsulating all subsequent elements.
* **SC2 COMPONENT (block)**: This primary container, styled with `.sc2__component`, sets the scene for the interactive scroll experience by defining the viewport height, content alignment, and managing overflow.
* **SC2 WRAPPER (block)**: At the heart of the component's design, this wrapper, identified by `.sc2__wrapper`, aligns and justifies the content centrally with an applied rotation, offering a unique visual arrangement.
* **SC2 IMAGE WRAPPERS (blocks)**: Multiple wrappers such as `.sc2__img-wrapper`, organize the images in a row format, enabling a staggered animation effect upon scrolling. These elements bring to life the geometric layout through varied directional animations, enhancing the depth and engagement of the scene.
* **SC2 IMAGES (images)**: Placed within the image wrappers, these images, marked by `.sc2__img`, are set for eager loading, ensuring immediate visibility. Their responsive scaling across devices maintains the visual integrity of the component.

### Animation Structure

**SC2 - Scroll**: This animation sequence, initiated upon scrolling, meticulously arranges the movement of images to complement the component's geometric aesthetics.

* **Odd Image Wrappers**: Images from odd-numbered wrappers transition from the screen's center to the left, employing a dynamic visual draw that captivates the viewer's attention.
* **Even Image Wrappers**: Conversely, images from even-numbered wrappers move from the right towards the center, establishing a visual balance and sustaining user interest through the scroll.
