# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/text/split-text-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.