Start | End example

Offset

FUTURAMA NEW SEASON!

futurama image

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

#image-container {
  height: 300vh;
  width: 100%;
}

.image {
  height: 100vh;
  width: 100%;
  position: sticky;
  top: 0;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#myClip);
}

.reveal {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

		</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>
		<article class="container"><h1>Start | End example</h1></article>
		<article class="container"><h1>Offset</h1></article>
		<div id="image-container">
                  <div class="image">
                    <div class="reveal"><h1>FUTURAMA NEW SEASON!</h1></div>
                    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fgetwallpapers.com%2Fwallpaper%2Ffull%2F2%2F8%2Fd%2F1388455-large-futurama-wallpapers-2000x1371.jpg&f=1&nofb=1&ipt=e161d52a81a12a9cb4053f9ae2aa4f1ca9b8270e998fa112ca17b08a7cd52c79&ipo=images" alt="futurama image" />
                    <svg width="100%" height="0">
                      <defs>
                      <clipPath id="myClip">
                      <rect class="rect" x="0" y="0" height="100vh" width="20%"/>
                      <rect class="rect" x="5%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="10%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="15%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="20%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="25%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="30%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="35%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="40%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="45%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="50%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="55%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="60%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="65%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="70%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="75%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="80%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="85%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="90%" y="0" height="100vh" width="5%"/>
                      <rect class="rect" x="95%" y="0" height="100vh" width="5%"/>
                      </clipPath>
                      </defs>
                    </svg>
                  </div>
		</div>
		<article class="container"><h1>Offset</h1></article>
	</body>
</html>

<script>
  gsap.registerPlugin(ScrollTrigger);

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

  timeline.add('hide')
  timeline.to('.rect', { css: {height: 0}, stagger: { each: 0.2, from: 'random' } }, 'hide');
  timeline.to('.reveal', { opacity: 1, y: '2em' }, '-=2');

</script>