Image Reveal #1

Component Structure

• IR1 COMPONENT (Section): Acts as the main container for the image reveal effect, facilitating the necessary structure for animation.

• IR1 CONTAINER (Container): Centers the image within the component, ensuring it's appropriately aligned for the reveal effect.

  • IR1 IMG CONTAINER (Div): A key element in the reveal effect, employing the ir1__img-container class for size and overflow control. It sets the stage for the image and its masking effect.

    • IR1 IMG MASK (Div): Utilizes the ir1__img-mask class to create an overlay that will animate to reveal the image beneath. It's styled to cover the image fully at the start.

    • IR1 IMG (Image): The target image for the reveal, adorned with the ir1__img class to ensure it fits perfectly under the mask. The image is set to cover the container's area completely, ensuring no part is left uncovered initially.

Animation Structure

IR1 - SCROLL

This timeline activates upon scrolling, featuring two primary animations that work in tandem to create the reveal effect:

1. Mask Scale Animation: Targets the .ir1__img-mask within the .ir1__img-container, initially covering the image entirely. As the user scrolls, the mask scales horizontally to zero, gradually revealing the image underneath. The animation emphasizes a smooth transition, powered by the "power2.out" easing.

2. Image Move and Scale Animation: Concurrently, the .ir1__img itself is subjected to a subtle transformation, moving horizontally by "5%" and scaling up to "1.2". This slight movement and zoom effect add depth to the reveal, making the image appear to emerge from beneath the mask.