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.