Gallery example

It's my clone of this website

Offset

Hello world 12014Here some big project
Hello world 22015Here some big project
Hello world 32016Here some big project
Hello world 42017Here some big project
Hello world 52018Here some big project
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>

#scroll-trigger-container {
  height: calc(2 * 5 * 100vh);
}

.image-container {
  width: 100vw;
  height: max-content;
  display: flex;
  flex-direction: column;
}

.pinned {
  position: sticky;
  top: 0;
}

.date-container {
  border-top: 1px solid #000;
  display: flex;
  justify-content: space-between;
}

.image {
  position: relative;
  width: 0;
  height: 0;
  left: 100vw;
}

img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
		</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>Gallery example</h1></article>
                <article class="container"><h1>It's my clone of <a href="https://fix.studio/">this website</a></h1></article>
		<article class="container"><h1>Offset</h1></article>
		<div id="scroll-trigger-container">
			<div class="pinned">
                          <div class="image-container">
                            <div class="date-container"><span>Hello world 1</span><span>2014</span><span>Here some big project</span></div>
                            <div class="image"><img src="https://cdn.wallpapersafari.com/30/33/TLwxlf.jpg" /></div>
                          </div>
                          <div class="image-container">
                            <div class="date-container"><span>Hello world 2</span><span>2015</span><span>Here some big project</span></div>
                            <div class="image"><img src="https://cdn.wallpapersafari.com/30/33/TLwxlf.jpg" /></div>
                          </div>
                          <div class="image-container">
                            <div class="date-container"><span>Hello world 3</span><span>2016</span><span>Here some big project</span></div>
                            <div class="image"><img src="https://cdn.wallpapersafari.com/30/33/TLwxlf.jpg" /></div>
                          </div>
                          <div class="image-container">
                            <div class="date-container"><span>Hello world 4</span><span>2017</span><span>Here some big project</span></div>
                            <div class="image"><img src="https://cdn.wallpapersafari.com/30/33/TLwxlf.jpg" /></div>
                          </div>
                          <div class="image-container">
                            <div class="date-container"><span>Hello world 5</span><span>2018</span><span>Here some big project</span></div>
                            <div class="image"><img src="https://cdn.wallpapersafari.com/30/33/TLwxlf.jpg" /></div>
                          </div>
			</div>
		</div>
		<article class="container"><h1>Offset</h1></article>
		<article class="container"><h1>Offset</h1></article>
		<article class="container"><h1>Offset</h1></article>
	</body>
</html>

<script>
	gsap.registerPlugin(ScrollTrigger);

        const imageContainerContRef = document.querySelectorAll('.image-container');
        const imageContainersRef = document.querySelectorAll('.image');
        const imagesRef = document.querySelectorAll('img');
        const spanRef = document.querySelectorAll('.date-container');

	const timeline = gsap.timeline({
			scrollTrigger: {
					trigger: "#scroll-trigger-container",
                                        markers: true,
					start: "top bottom", 
                                        scrub: 0.8,
                                        end: `bottom top`, 
				}});
        
        imageContainersRef.forEach((e, i) => {
            timeline.add(`open-timeline-${i}`);
            timeline.to(e, {width: '100vw', height: '100vh', left: 0 }, `open-timeline-${i}`);
            timeline.add(`shrink-timeline-${i}`);
            timeline.to(e, {width: '0', height: '0'}, `shrink-timeline-${i}`);
            timeline.to(imageContainersRef[i+1], {width: '100vw', height: '100vh', left: '0'}, `shrink-timeline-${i}`);
            if (i > 0) {
                for (j = 0; j < imageContainerContRef.length; j++) {
                  timeline.to(imageContainerContRef[j], {y: -30 * i}, `shrink-timeline-${i}`);
                }
            }
          });
</script>