Me topé con este codepen y me preguntaba si existe la posibilidad de tener varias imágenes, una al lado de la otra, en la sección de desplazamiento horizontal. Entonces, en lugar de solo un div con bg-iamge, ¿quizás solo etiquetas img simples dentro del div? ¿Sería posible incrustar videos allí también?

Cualquier ayuda es apreciada, no pude resolverlo yo mismo. :(

Ver codepen aquí: Enlace

 <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 } });