project-pinned-banner

Summary

A full-width banner image rendered as a CSS background that pins under the gallery using ScrollTrigger pin with pinSpacing:false, so the testimonial/team section above it slides over the banner like a curtain.

HTML structure (minimal)

<div class="container-fluid p-0">
  <div class="row g-0">
    <div class="col-xl-12">
      <div class="tp-project-full-img-wrap p-relative fix">
        <div class="tp-project-full-img" data-speed="auto"
             style="background-image: url('/inner-service/hero/hero-1-2.jpg')"></div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-project-full-img-wrap { width: 100%; height: 100vh; }
.tp-project-full-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

Animation logic

gsap.timeline({
  scrollTrigger: {
    trigger: '.tp-project-full-img-wrap',
    start: 'top 65',
    end: 'bottom 0%',
    pin: '.tp-project-full-img',
    pinSpacing: false,
  }
});

Notable details

• pinSpacing:false is the trick — without it, the wrapper would push subsequent sections down. Keeping it false makes the next section visually slide over the pinned image.
• Uses background-image rather than an <img> so the size stays bulletproof during pin.
• data-speed="auto" lets ScrollSmoother pick a complementary speed for the banner itself before it pins.

Use when

• As a transition between two scroll regions when you want one trophy image to stay still while content moves.
• Hero-after-hero patterns where you want the second hero to arrive without a hard cut.

Caveats

• The pinned section grabs 100vh — make sure the surrounding sections have enough vertical breathing room.
• Requires GSAP ScrollTrigger (free) plus ideally ScrollSmoother for the entry parallax.