Projects #6

Component Structure

PR6 COMPONENT (Section) - Class: pr6__componentThis 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__contentServes 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-listThis 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__headingDisplays 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-itemsWraps 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-detailHosts 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__triggerThese 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%.