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.

Important

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