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


---

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