# Split Text #2

### Component Structure

* **ST2 SB TRIGGER** (Section): This serves as the scrollable trigger area for the animation, extending to `300vh` in height with the `st2-sb__trigger` class applied for styling and to identify the trigger zone.
* Within the **ST2 SB TRIGGER**, a **Div** element is placed to center the text container vertically within the viewport, making use of a flex display to align its child container.
  * **Container**: Directly holds the **Text-Basic** element, ensuring it's properly positioned within the vertical center of the section.
    * **ST2 SB TARGET** (Text-Basic): The text to be animated, split into lines as the user scrolls. The `st2-sb__target` class applies specific styles and animations, including a dynamic background clip effect that reveals the text in a unique manner as the page scrolls.

### Animation Structure

**ST2 - SCRUB - ANIMATION**

This timeline consists of animations that are triggered by scrolling within the `.st2-sb__trigger` section:

1. **Text Split Animation**: Splits the text into lines (`splitTextType` set to "lines"), enabling the animation to target each line individually for a more detailed and dynamic effect as the user scrolls.
2. **Background Width Animation**: Adjusts the `--bg-width` custom property from `0%` to `100%` over the duration of the scroll through the trigger area. This effect creates a revealing animation for the text, where the text color changes as the background "fills in" behind it. The `.st2-sb__target .brf-split-lines` selector indicates that this animation targets the background of the split lines, with a staggered delay (`staggerValue` of 0.5) to enhance the visual impact.

The scroll-triggered animation is set to pin the **ST2 SB TRIGGER** section, creating a fixed position effect for the duration of the scroll through this section. The `scrub` property is enabled with a `scrubValue` of 2, ensuring a smooth transition of the animation tied directly to the scroll speed and position.

### Key Features

* **Custom CSS for Split Text**: The `st2-sb__target` class includes custom CSS that implements the background clip effect on the text, dynamically controlled through the `--bg-width` variable adjusted by the scroll animation.