Galery with overlap

Hello world
Hello world
Hello world

Offset

        
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
    <style>

.image-component {
	height: 100vh;
	width: 100vw;
	position: relative;
}

.image-part {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.image-part img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.gsap-scroll-wrapper {
	height: 200vh;
}

.image-component {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100vw;
}

.text-part {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	color: #fff;
}
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
    <article class="container"><h1>Galery with overlap</h1></article>
    <div id="scroll-trigger-container">
	    <div class="gsap-scroll-wrapper">
		    <div class="image-component">
			    <div class="image-part"><img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.mooiweesp.nl%2Fwp-content%2Fuploads%2F2020%2F01%2Fde-kom-van-weesp-mooi-weesp-scaled.jpg&f=1&nofb=1&ipt=c71566f112c60371d861d2a2e0f8fc7e5a0af9c7fd8678900b7c2c2f6809077a&ipo=images" /></div>
			    <div class="text-part">Hello world</div>
		    </div>
	    </div>
	    <div class="gsap-scroll-wrapper">
		    <div class="image-component">
			    <div class="image-part"><img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi1.wp.com%2Fwww.redpers.nl%2Fwp-content%2Fuploads%2F2018%2F04%2Fbridge-1542976_1920.jpg%3Ffit%3D1920%252C1271%26ssl%3D1&f=1&nofb=1&ipt=ccd6961b14a226978755a895b4acb38dd2d24ea53d936e2518aea4558f4efbbb&ipo=images" /></div>
			    <div class="text-part">Hello world</div>
		    </div>
	    </div>
	    <div class="gsap-scroll-wrapper">
		    <div class="image-component">
			    <div class="image-part"><img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.5RrizK3yhHOJCcMUfYElwAHaE8%26pid%3DApi&f=1&ipt=8ac0a978645483eeb9da68c560fc521051167eb1bfe1f30a228173bfc712bd64&ipo=imageshttps://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.5RrizK3yhHOJCcMUfYElwAHaE8%26pid%3DApi&f=1&ipt=8ac0a978645483eeb9da68c560fc521051167eb1bfe1f30a228173bfc712bd64&ipo=images" /></div>
			    <div class="text-part">Hello world</div>
		    </div>
	    </div>
    </div>
    <article class="container"><h1>Offset</h1></article>
  </body>
</html>

<script>
  gsap.registerPlugin(ScrollTrigger);

  const sections = document.querySelectorAll('.gsap-scroll-wrapper');

  const sectionsTriggers = [];
	sections.forEach((domElement, i) => {
			sectionsTriggers.push(
				gsap.timeline({
					scrollTrigger: {
							trigger: domElement,
							scrub: 0.4,
							start: 'top top',
							end: 'bottom top',
							markers: true,
						}
					}
				)
			)
			sectionsTriggers[i].to(domElement.querySelector('.image-part'), { opacity: 0.7, width: '80%', height: '80%', top: '10%', left: '10%' }, '0');
			sectionsTriggers[i].to(domElement.querySelector('.text-part'), { opacity: 0,  }, '0');
		}
    );
</script>