> 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-4.md).

# Scroll Scene #4

### Component Structure

* **COPY WRAPPER (div):** Acts as a container for the entire Scroll Scene #4, ensuring all elements are grouped together for cohesive behavior.
* **SC4 COMPONENT (section):** The main viewport of Scroll Scene #4, styled with `.sc4__component`, sets the foundational layout and visual area for the interactive experience.
* **SC4 IMAGE (image):** A visually striking background image, applied with `.sc4__image`, fills the viewport and sets the thematic backdrop of the scene.
* **SC4 GRID (block):** This grid, defined by `.sc4__grid`, organizes the column elements in a structured manner over the background image, facilitating the animated interaction.
* **SC4 GRID COLs (divs):** Individual columns within the grid, identified by `.sc4__grid-col`, act as masks for the background image, enabling the animation effects as users scroll.

### Animation Structure

**SC4 - Scroll:** This Bricksforge timeline is designed to animate the `.sc4__grid-col` elements in two groups, with differing animations to create a captivating visual effect as the page scrolls.

* **Column Animation 1:** Targets the second, third, and sixth columns for a bottom-to-top reveal effect, gradually hiding these columns as the user scrolls down.
* **Column Animation 2:** Focuses on the first, fourth, fifth, and seventh columns, employing a top-to-bottom masking animation, progressively revealing these columns on scroll.