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