Text scroll and hover effect with GSAP and clip

index.html

<section class="dark-time">
<div class="container">
  <h1 class="text">TAKES ME<span>WOAH</span></h1>
  <h1 class="text">BACK<span>WAY BACK</span></h1>
  <h1 class="text">TO A VERY<span>CRAZYYY</span></h1>
  <h1 class="text">DARK TIME<span><a href="https://stacksorted.com/text-effects/minh-pham" target="_blank">DARK AGES</a></span></h1>
  <h1 class="text">IN MY LIFE<span><a href="https://twitter.com/juxtopposed" target="_blank">READ ON</a></span></h1>
</div>
</section>

script.js

gsap.registerPlugin(ScrollTrigger);

const textElements = gsap.utils.toArray('.text');

textElements.forEach(text => {
  gsap.to(text, {
    backgroundSize: '100%',
    ease: 'none',
    scrollTrigger: {
      trigger: text,
      start: 'center 80%',
      end: 'center 20%',
      scrub: true,
    },
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollToPlugin.min.js"></script>

style.css

.dark-time {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #0D0D0D;
  margin: 10%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 200vh;
}

.text {
  font-size: 10vw;
  letter-spacing: -.01em;
  line-height: 100%;
  margin: 0;
  
  width: 100%;
  color: rgb(182, 182, 182, 0.2);
  background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;
  

  border-bottom: 1px solid #2F2B28;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

span {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #4246ce;
  color: #0D0D0D;
  
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all cubic-bezier(.1,.5,.5,1) 0.4s;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text:hover > span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

a {
  text-decoration: none;
  color: inherit;
}

text-scroll-and-hover-effect-with-gsap-and-clip.markdown

Text scroll and hover effect with GSAP and clip

A Pen by Vashon Gonzales on CodePen.

License.