# Vertical Scroll #1

### Component Structure

* **VS1 SHOWCASE SECTION** (Section): Serves as the main stage for the vertical scrolling effect, facilitating the display and interaction of the content.
* **VS1 SHOWCASE CONTAINER** (Container): Centers the showcase content within the section, aligning it for optimal viewing.
  * **VS1 SHOWCASE WRAPPER** (Div): A pivotal element that houses both the textual content and images, employing the `vs1__wrapper` class for layout management.
    * **VS1 TEXT WRAPPER** (Div): Contains multiple **VS1 TEXT SINGLE** divs, each holding sections of textual content, utilizing the `vs1__text-wrapper` for organizational purposes.
      * **VS1 TEXT SINGLE** (Div): Individual containers for sections of text, headlines, and image backgrounds related to the text content. Each is styled with `vs1__text-single` and additional classes for specific styling needs.
    * **VS1 IMAGE WRAPPER** (Div): Dedicated to containing the visual elements of the showcase, applying the `vs1__image-wrapper` class for proper positioning and execution of the vertical scroll effect.
      * **VS1 IMAGE** (Div): Individual divs acting as containers for background images, tagged with classes like `vs1__image-single` and `vs1-is--#` for specific image styling and positioning.

### Animation Structure

**VS1 - Image Clip**

This timeline animates the background images within the **VS1 IMAGE** divs by altering their `clipPath` and `backgroundPosition` properties, creating a dynamic reveal effect as the user scrolls. The animations are tailored to each image, ensuring a cohesive visual storytelling as part of the vertical scroll experience. The `scrollTrigger` is applied to `.vs1__image-wrapper`, with adjustments made to ensure the animation is smooth and synchronized with the user's scroll actions.

**VS1 - Pin**

This timeline ensures that the **VS1 IMAGE WRAPPER** is pinned during the scroll, creating a stationary visual effect while the textual content moves. This pinning effect, activated via a `scrollTrigger` tied to `.vs1__component`, enhances the visual contrast between the scrolling text and the static images, contributing to the overall narrative and user engagement of the showcase.