> 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/projects/projects-6.md).

# Projects #6

### Component Structure

**PR6 COMPONENT (Section) - Class: `pr6__component`**This is the main container for the project display, structured to handle various content blocks. It sets the foundational layout with appropriate padding and positioning settings.

**PR6 CONTENT (Block)  - Class: `pr6__content`**Serves as the primary content holder, styled to form a grid layout that showcases project details. It’s structured to be visually impactful and to organize project items effectively.

**PR6 CONTENT LIST (Block) - Class: `pr6__content-list`**This block contains a list of projects, formatted with a flexible box layout to ensure spacing and alignment are maintained across devices.

**PR6 HEADING (Heading) - Class: `pr6__heading`**Displays the title "Our Projects." It's styled prominently to serve as the section header, making it a focal point for the presentation of project listings.

**PR6 CONTENT ITEMS (Div) - Class: `pr6__content-items`**Wraps individual project entries, each featuring an image and a title. It uses a row layout to present these items horizontally, facilitating easy navigation through project content.

#### Individual Project Items - **Classes: `pr6__content-item`, `pr6__content-item-img`, `pr6__content-item-title`**

Each project item is linked for detailed viewing, with an image (`pr6__content-item-img`) and a project title (`pr6__content-item-title`). These are styled to highlight each project distinctly within the list.

**PR6 CONTENT DETAIL (Block) - Class: `pr6__content-detail`**Hosts detailed information for each project. It is visually separated from the list and contains detailed text and images, providing an in-depth look at each project.

#### Detailed Project Information Items - **Classes: `pr6__content-detail-item`, `pr6__content-detail-heading`, `pr6__content-detail-text`, `pr6__content-detail-img`**

Each detail block (`pr6__content-detail-item`) includes a heading (`pr6__content-detail-heading`), descriptive text (`pr6__content-detail-text`), and an accompanying image (`pr6__content-detail-img`). These elements are animated to appear dynamically as the user scrolls through the content.

**PR6 TRIGGERS (Block) - Class: `pr6__trigger`**These elements are strategically placed to initiate animations when intersected by the scroll action, enhancing the interactivity and engagement of the component.

### Animation Structure

**PR6 - SCROLL**

* Animates the `.pr6__heading` to smoothly transition with the scroll, maintaining engagement and focus.

**PR6 - CONTENT DETAIL**

* Applies sophisticated animations to `.pr6__content-detail-item`, revealing content through creative clipping and transformation effects that captivate as users explore project details.

**PR6 - CONTENT LIST ITEM**

* Enhances the appearance of `.pr6__content-items` with opacity transitions, drawing attention to new project items as they come into view.

### Adding/Removing an item

Step 1: Duplicate **PR6 CONTENT ITEM** and **PR6 CONTENT DETAIL ITEM**

Step 2: Select the Timeline **PR6 - SCROLL** and add 100% per added item inside of Scroll End

To remove an item delete **PR6 CONTENT ITEM** and **PR6 CONTENT DETAIL ITEM** and substract 100%.