Image Reveal #3

Component Structure

• IR3 SECTION (Section): Serves as the foundational layer for the image reveal effect, facilitating the positioning and alignment of the reveal mechanism.

• IR3 CONTAINER (Container): Centers the image within the viewport, ensuring it's properly aligned for the reveal effect.

  • IR3 IMAGE CONTAINER (Div): The primary structure that houses the image and its masking effect, employing the ir3__img-container class for size, position, and overflow control.

    • IR3 IMAGE MASK (Div): Utilizes a grid layout to create multiple masking elements across the image surface, styled with the ir3__img-mask class. This layer is designed to reveal the image beneath through the animation of its grid items.

      • IR3 MASK GRID (Divs): Individual grid items within the mask, each styled with the ir3__mask-grid-item class, act as segments of the overall mask. These segments are animated to disappear and reveal the image below.

    • IR3 IMAGE (Image): The target image for the reveal effect, fitting the container perfectly to ensure the reveal effect is applied uniformly. Styled with the ir3__img class to cover the container's area.

Animation Structure

IR3 - SCROLL REVEAL

This timeline defines the scroll-triggered animation sequence for the Image Reveal #3 component, consisting of a singular animation that fades out the grid items to uncover the image beneath:

• Grid Item Fade-Out Animation: Targets each grid item within the .ir3__img-mask, gradually changing their opacity to 0. This creates an effect where the image is revealed piece by piece, adding a dynamic visual interest as the user scrolls. The animation applies to all children of .ir3__img-mask that match the .ir3__mask-grid-item class, with the animation duration set to 0.5 seconds for each item.