> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/scroll-scenes/scroll-scene-8.md).

# Scroll Scene #8

### Component Structure

**SC8 COMPONENT (Section)**

* **Class: `sc8__component`**
* This main section serves as the container for the entire scroll scene, incorporating various subcomponents to create a complex interactive experience.

**SC8 PIN (Block)**

* **Classes: `sc8__pinned`**
* This block is designed to be pinned during the scroll interaction, serving as the stage for other animated elements. It includes multiple background image wrappers and the main content container.

**SC8 BG IMG WRAPPER (Blocks)**

* **Class: `sc8__image-wrap`**
* Each wrapper block contains one of several background images that contribute to the visual depth of the scene.

**SC8 BG IMG (Images)**

* **Class: `sc8__img`**
* These images are positioned absolutely within their respective wrappers, filling the viewport to form a layered background effect.

**SC8 CONTAINER (Container)**

* **Class: `sc8__container`**
* Hosts the main interactive content of the scene, including textual information and control indicators.

**SC8 INDICATOR GRID (Div)**

* **Class: `sc8__indicator-grid`**
* Displays a set of interactive indicators that visually represent the scroll progress through the scene.

**SC8 INDICATOR TRACK & BAR (Divs)**

* **Classes: `sc8__indicator--track`, `sc8__indicator--bar`**
* Tracks are the base for the indicators, with bars showing the progression as the user scrolls.

**SC8 CONTENT (Block)**

* **Class: `sc8__content`**
* Contains the main narrative or informative text along with additional images that further detail the scene's thematic elements.

**SC8 TEXT WRAPPER (Block)**

* **Class: `sc8__text-wrapper`**
* Wraps the main text content of the scene, enhancing readability and focus.

**SC8 CONTENT IMAGES (Block)**

* **Class: `sc8__content--images`**
* Hosts supplementary images that are revealed or highlighted as part of the scroll interaction.

### Animation Structure

**Timeline 1: SC8 - PIN**

* This timeline manages the pinning behavior of the `.sc8__pinned` area, ensuring that it stays in view while other animations play out as the user scrolls.

**Timeline 2: SC8 - INFO**

* Animates the text within the `.sc8__info` class, enhancing visibility and engagement through opacity transitions and perspective plays.

**Timeline 3: SC8 - BG IMG**

* Focuses on the `.sc8__img` elements, applying fade-in effects to transition between background images smoothly.

**Timeline 4: SC8 - INDICATOR**

* Controls the animation of the `.sc8__indicator--bar`, filling in the track as the user scrolls to visually represent reading progress or scroll depth.