GSAP Stacking images

CSS Classes used:

hero h1: Hero class added to first container. The h1 heading has opacity applied on scroll.
card scroll
last-cont: Add class to last container after images
pinned
img

Trigger Class:

JS

				
					gsap.registerPlugin(ScrollTrigger);

document.addEventListener("DOMContentLoaded", function () {
const footer = document.querySelector(".last-cont");
const lastCard = document.querySelector(".card.scroll");
const pinnedSections = gsap.utils.toArray(".pinned");

pinnedSections.forEach((section, index, sections) =&gt; {
let img = section.querySelector(".img");

let nextSection = sections[index + 1] || lastCard;
let endScalePoint = top+=${nextSection.offsetTop – section.offsetTop} top;

gsap.to(section, {
scrollTrigger: {
trigger: section,
start: "center center",
end:
index === sections.length
? +=${lastCard.offsetHeight / 2}
: footer.offsetTop – window.innerHeight,
pin: true,
pinSpacing: false,
scrub: 1,
},
});

gsap.fromTo(
img,
{ scale: 1 },
{
scale: 0.5,
ease: "none",
scrollTrigger: {
trigger: section,
start: "top top",
end: endScalePoint,
scrub: 1,
},
}
);
});

const heroH1 = document.querySelector(".hero h1");
ScrollTrigger.create({
trigger: document.body,
start: "top top",
end: "+=350vh",
scrub: 1,
onUpdate: (self) =&gt; {
let opacityProgress = self.progress;
heroH1.style.opacity = 1 – opacityProgress;
},
});
});

CSS

				
					.card.scroll {
  position: relative;
}

.img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 1000px;
  height: 700px;
  transition: 0s;
}