<div class="hero">
  <div class="hero-title">SUMMIT</div>
  <img class="hero-img" src="https://images.unsplash.com/photo-1508923567004-3a6b8004f3d7" alt="Mountains image">
  <div class="hero-cta">Scroll to discover</div>
</div>

<!-- implementation of the dribble https://dribbble.com/shots/5488119-Text-Reveal-on-Scroll -->

body {
  font-family: "Archivo Black", sans-serif;
}

.hero-img {
  width: 100%;
  display: block;
}

.hero-title {
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: url("https://images.unsplash.com/photo-1508923567004-3a6b8004f3d7");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 20%;
  left: 50%;
  font-size: 25em;
  user-select: none;
}

.hero-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  font-size: 12px;
  transform: translateX(-50%);
  color: #fff;
  text-transform: uppercase;
  padding: 18px 30px;
  background-color: #fff;
  color: #000;
  font-family: 'Arial';
}

gsap.registerPlugin(ScrollTrigger);

gsap.to(".hero-title", {
  x: -1300,
  backgroundPosition: '1300px 0',
  scrollTrigger: {
    trigger: "body",
    start: 'top top',
    scrub: true,
  }
});

gsap.to(".hero-cta", {
  y: 80,
  scrollTrigger: {
    trigger: "body",
    start: 'top top',
    end: 'bottom top',
    scrub: true,
  }
});