Image Reveal #2

Component Structure

• IR2 - IMG CONTAINER (Div): This is the central element of the component, designed to house the image and its masking effect. It's styled with the ir2__img-container class for relative positioning and overflow control, setting the foundation for the reveal animation.

  • IR2 - IMG MASK (Div): Utilizes the ir2__img-mask class to create a foreground layer that initially covers the image. This layer is set to scale horizontally from 0 to full width, revealing the image beneath it as the animation progresses.

  • IR2 - IMG (Image): The target image for the reveal effect, which fills the container completely thanks to the ir2__img class ensuring it's appropriately sized and positioned.

Animation Structure

IR2 - SCROLL REVEAL

This timeline defines the scroll-triggered animation sequence for the Image Reveal #2 component, consisting of animations that gradually uncover the image as the user scrolls:

1. Mask Reveal Animation: Targets the .ir2__img-mask within the .ir2__img-container, scaling it horizontally from 0 (completely hidden) to 1 (fully visible) over 0.5 seconds. This animation creates the effect of the image being revealed from left to right.

2. Image Fade-in Animation: Before the mask starts revealing the image, the .ir2__img itself transitions from completely transparent (autoAlpha: 0) to fully opaque (autoAlpha: 1) in a quick 0.1-second animation. This ensures the image is ready and visible as soon as the mask begins to move.

3. Mask Completion Animation: Ensures that the mask scales fully across the image, solidifying the reveal effect. This last step confirms the image is entirely visible after the scroll-triggered animation.