# Projects #3

### Component Structure

* **COPY WRAPPER (div):** A wrapping div that encapsulates the entire component. It doesn't directly influence the visual presentation but serves as a structural container.
* **CAN BE DELETED (section):** These sections are placeholders indicating the start and end of the component. They can be removed without affecting the main functionality.
* **PR3 COMPONENT (section):** This section is marked with the CSS class `pr3__component`, which applies significant padding to the top and bottom, creating a spacious layout for the component's contents.
* **PR3 CONTAINER (container):** The main container for the project items, labeled as `pr3__container`. It organizes the child elements (PR3 ITEM blocks) within a unified styling context.
* **PR3 ITEM (block):** Each item represents a project and has the class `pr3__item`. This class styles the project items, setting their position, alignment, and size to ensure they are centered and responsive across devices.
* **PR3 IMAGE (image):** Within each PR3 ITEM, an image element styled with `pr3__image` showcases project visuals. The class applies a unique clipping path and size adjustments for responsive design.
* **PR3 HEADING WRAPPER (div):** A wrapper for the project title, employing the class `pr3__heading-wrapper` to manage its display and alignment.
* **PR3 HEADING (heading):** The project title, tagged as an H2 heading and styled with `pr3__heading`, features uppercase text transformation and dynamic font sizing for responsiveness.
* **PR3 SEPARATOR (div):** A decorative line beneath the heading, using the class `pr3__heading-sep` to control its width and visibility across different breakpoints.

### Animation Structure

* **PR3 - Heading In View:** This timeline triggers animations for the `.pr3__heading-wrapper` as it scrolls into view, making headings fade in and then expanding the separator width from 0% to 100%.
* **PR3 - Image In View:** Targets `.pr3__item` to adjust the clip path of images within, creating a reveal effect as the user scrolls through the component.

### Event Actions

* **PR3 - MLEAVE HEADING & PR3 - MENTER HEADING:** These events change the opacity of headings upon mouse leave and enter, adding a dynamic interaction element to the text.
* **PR3 - SET PROPERTIES (pageLoad):** Sets initial properties for headings and images, ensuring they start with predefined opacity and clip path settings when the page loads.
* **PR3 - SCROLL SPEED (pageLoad):** A sophisticated script adjusts the skew of headings and images based on the scroll speed, offering a unique, interactive visual effect.

### <mark style="color:purple;">Important</mark>

* **PR3 - SCROLL SPEED (pageLoad):** This event dynamically skews `.pr3__heading`, `.pr3__image`, and `.pr3__heading-sep` elements according to scroll speed. It's crucial to update the `getTimeline` function with the correct timeline ID, `getTimeline('ID of "PR3 - Heading In View')`, which corresponds to "PR3 - Heading In View". This ensures the scroll speed effect is properly synchronized with the heading animations for a cohesive user experience.


---

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