Bricksmotion Components
  • Getting Started
  • Setup
    • Where is my license key?
    • Activate you license within Bricksforge
  • Using components
    • Bricksforge One-Click
    • Bricks Structure
    • Activate "Event Panel"
    • Manual Importing Timelines and Events
    • Locked Classes
    • Reassign Timelines
    • Loading Conditions
  • Components
    • HEROES
      • Hero #1
      • Hero #2
      • Hero #3
      • Hero #4
      • Hero #5
      • Hero #6
      • Hero #7
      • Hero #8
      • Hero #9
      • Hero #10
    • SCROLL SCENES
      • Sticky Sections #1
      • Vertical Scroll #1
      • Scroll Scene #1
      • Scroll Scene #2
      • Scroll Scene #3
      • Scroll Scene #4
      • Scroll Scene #6
      • Scroll Scene #7
      • Scroll Scene #8
      • Scroll Scene #9
    • BUTTONS
      • Button #1
      • Button #2
      • Button #3
      • Button #4
      • Button #5
      • Button #6
      • Button #7
    • TABS
      • Tabs #3
      • Tabs #4
    • PROJECTS
      • Projects #1
      • Projects #2
      • Projects #3
      • Projects #4
      • Projects #5
      • Projects #6
      • Projects #7
    • CTA
      • CTA #1
      • CTA #2
    • CARDS
      • Cards #1
      • Cards #2
    • MENUS
      • Bottom Nav #1
      • Mega Menu #1
      • Full Screen Menu #2
      • Full Screen Menu #3
    • CUSTOM CURSORS
      • Custom Cursor #1
    • LOADING SCREENS
      • Loading Screen #1
      • Loading Screen #2
      • Loading Screen #3
    • TEXT
      • Text Hover #1
      • Split Text #2
    • IMAGE
      • Image Tilt #1
      • Image Reveal #1
      • Image Reveal #2
      • Image Reveal #3
    • PROGRESS BARS
      • Progress Bar #1
      • Progress Bar #2
Powered by GitBook
On this page
  • Component Structure
  • Animation Structure
  1. Components
  2. SCROLL SCENES

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.

PreviousSticky Sections #1NextScroll Scene #1

Last updated 1 year ago