LGBT Alpha Donkey

/article>
        <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>
body {
	margin: 0;
	padding: 0;
}

#image-container {
  width: 100vw;
  height: 100vh;
  position: sticky;
  top: 0;
}

.bottom-image {
  position: absolute;
  width: 100%;
  object-fit: cover;
  height: 100%;
  top: 0;
  left: 0;
}

.top-layer {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.rainbow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.rainbow__color {
  width: 100vw;
  position absolute;
  top: 0;
  height: calc(100vh / 6);
}

.rainbow__color:nth-child(1) {
  background: #e50000;
}
.rainbow__color:nth-child(2) {
  background: #ff8d00;
}
.rainbow__color:nth-child(3) {
  background: #ffee00;
}
.rainbow__color:nth-child(4) {
  background: #028121;
}
.rainbow__color:nth-child(5) {
  background: #004cff;
}
.rainbow__color:nth-child(6) {
  background: #770088;
}

.scroll-trigger-big {
    height: 150vh;
}
.offset {
    height: 100vh;
}

		</style>
	</head>
	<body>
		<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
		<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>
    <div class="scroll-trigger-big">
      <div id="image-container">
        <img class="bottom-image" src="/Untitled.jpeg" />
        <div class="rainbow">
          <div class="rainbow__color"></div>
          <div class="rainbow__color"></div>
          <div class="rainbow__color"></div>
          <div class="rainbow__color"></div>
          <div class="rainbow__color"></div>
          <div class="rainbow__color"></div>
        </div>
        <img class="top-layer" src="/Untitled.gif" />
      </div>
    </div>
		<article class="offset">/article>
	</body>
</html>

<script>
  gsap.registerPlugin(ScrollTrigger);

  const timeline = gsap.timeline({
      scrollTrigger: {
          trigger: ".scroll-trigger-big",
          markers: true,
          scrub: 1,
          start: "top top", 
          end: "bottom center", 
        }});

  timeline.from('.rainbow__color', { css: {width: 0}, stagger: { each: 0.2 } });

</script>