image-reveal-about

Summary

A two-column "About Our Company" block. The left column carries the section heading (split-text on scroll), a paragraph, and a primary CTA; the right column houses two stacked photographs, each animated in via a horizontal mask-reveal where the container slides one direction while the image inside counter-translates and zooms out.

HTML structure (minimal)

<section class="about-section pb-130">
  <div class="round-shape"><img src="assets/img/shapes/round-shape.png" alt="shape"></div>
  <div class="about-wrap">
    <div class="row about-wrapper align-items-center">
      <div class="col-lg-7">
        <div class="about-content fade-wrapper">
          <div class="section-heading mb-0">
            <h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5">About Our Company</h4>
            <h2 class="section-title overflow-hidden" data-text-animation data-split="word" data-duration="1">
              We provide best web design <br>solution in city
            </h2>
            <p class="fade-top">Digital marketing is the act of promoting and selling…</p>
            <div class="about-btn fade-top">
              <a href="about.html" class="rr-primary-btn">Get Started Now<i class="fa-regular fa-arrow-right"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="about-img-wrap">
          <div class="about-img reveal">
            <img class="img-1" src="assets/img/images/about-img.jpg" alt="img">
          </div>
          <div class="about-img-2 reveal">
            <img class="img-2" src="assets/img/images/about-img-1.jpg" alt="img">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.reveal {
  position: relative; overflow: hidden; visibility: hidden;
  /* gsap will set autoAlpha:1 */
}
.about-img { /* primary photo, ~470x560 */
  border-radius: 8px; overflow: hidden;
}
.about-img-2 { /* offset secondary photo, smaller, sits below-and-right */
  position: absolute; right: -50px; bottom: -60px;
  width: 60%; border-radius: 8px;
}

Animation logic

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
let revealContainers = document.querySelectorAll(".reveal");
revealContainers.forEach((container) => {
  let image = container.querySelector("img");
  let tl = gsap.timeline({
    scrollTrigger: { trigger: container, toggleActions: "restart none none reset" }
  });
  tl.set(container, { autoAlpha: 1 });
  tl.from(container, 1.5, { xPercent: -100, ease: Power2.out });
  tl.from(image,     1.5, { xPercent:  100, scale: 1.3, delay: -1.5, ease: Power2.out });
});

Notable details

• The reveal is a two-axis trick: the wrapping .reveal slides in from xPercent:-100 while the inner <img> slides out from xPercent:100 — delay: -1.5 makes them overlap perfectly so the picture appears to slide out from under a curtain.
• Both photos in the about column carry the .reveal class, so the secondary 60%-width photo gets the same effect, layered into a different z-index.
• The wrapper section uses .fade-wrapper + .fade-top for the heading, so headline words and supporting CTA cascade in just before the photos start their mask reveal.

Use when

• Editorial about / mission blocks where photography wants more theatre than a fade-in.
• Anywhere you want a "curtain wipe + zoom-out" reveal on a single image without writing custom WebGL or canvas masks.

Caveats

• The reveal expects .reveal to wrap exactly one <img>; multiple children produce undefined behaviour with container.querySelector("img").
• toggleActions: "restart none none reset" means the animation runs every time the section re-enters the viewport — visually beautiful, but on devices with low frame budgets it can feel thrashy. Consider switching to "play none none none" for production.