Cooler GSAP Text Effekt mit Scrolltrigger

Wie ihr sicher schon gemerkt habt, bin ich ein absoluter Fan von GSAP, denn mit dieser freien Bibliothek kann man wirklich sehr einfach coole Effekte machen.

Heute habe ich mal wieder so einen coolen Effekt für euch, der einen Scroll Trigger mit einem Hover-Effekt verknüpft.

Wenn ihr herunterscrollt, werden Wörter von fast unsichtbar in sichtbar umgestellt, und wenn ihr mit der Maus über die Zeilen huscht, dann wird dieser Effekt aktiviert.

Ich finde es perfekt, um Fokuswörter auf einer Webseite hervorzuheben oder um den Besuchern einen Text einfach sehr kreativ zum Lesen zu präsentieren.

Video

HTML

<div class="container">
      <h1 class="text"><span>COOOOLER</span> TEXT EFFEKT</h1>
      <h1 class="text">MIT GSAP<span>AND CLIPPING</span></h1>
      <h1 class="text">GEILOOOO<span>SUPIIIII</span></h1>
      <h1 class="text">
        HOVER ON ME<span><a href="https://www.chefblogger.me" target="_blank">CHEFBLOGGER</a></span>
      </h1>
      <h1 class="text">
        LIKE THIS?<span><a href="https://masto.maechler.cloud" target="_blank">LET'S CONNECT</a></span>
      </h1>
    </div>

CSS

:root {
  --bg: #0d0d0d;
  --text: rgba(155, 25, 25, 0.2);
  --hoverbg: #4246ce;
  --hovertext: #0d0d0d;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  background-color: var(--bg);
  margin: 10%;
}

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

.text {
  font-size: 10vw;
  letter-spacing: -0.01em;
  line-height: 100%;
  margin: 0;

  width: 100%;
  color: var(--text);
  background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(0.1, 0.5, 0.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: var(--hoverbg);
  color: var(--hovertext);

  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all cubic-bezier(0.1, 0.5, 0.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;
}

GSAP

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,
    },
  });
});