I stumbled across this codepen and was wondering if there is away to have multiple images, side by side, in the horizontal scroll section. So in stead of just one div with bg-iamge, maybe just simple img tags inside the div? Would it be possible to embed videos in there as well?

Any help is appreciated, I couldn't figure it out myself. :(

See codepen here: Link

<h1 class="header-section">Scroll down to see a horizontal scroll section</h1>


<div class="massiveImage"></div>

<h1 class="header-section">Now we're back to regular scrolling</h1>


<header>
   <a href="https://greensock.com/scrolltrigger">
     <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
  </a> 
</header>



.massiveImage {
  height: 100vh;
  width: 400vw;
  background-size: cover;
  background-position: center;
}
.header-section {
  padding-bottom: 50vh;
  margin-bottom: 0;
}


gsap.registerPlugin(ScrollTrigger);

gsap.set(".massiveImage", {backgroundImage: `url(https://source.unsplash.com/random/${innerWidth * 3}x${innerHeight})`})

gsap.to(".massiveImage", {
  xPercent: -100, 
  x: () => innerWidth,
  ease: "none",
  scrollTrigger: {
    trigger: ".massiveImage",
    start: "top top",
    end: () => innerWidth * 3,
    scrub: true,
    pin: true,
    invalidateOnRefresh: true,
    anticipatePin: 1
  }
});