GSAP Text Animationen » 5 Copy-Paste Beispiele für Webdesigner

Text ist nicht mehr statisch. Im modernen Webdesign fungiert Typografie als aktives UI-Element, das auf Scrollen, Mausbewegungen und Interaktion reagiert.

Hier sind 5 außergewöhnliche Animationen, die weit über das Standard-"Fade In" hinausgehen.

1. REVEAL & MASK (THE ARCHITECT)

Der Klassiker für extrem saubere, editoriale Layouts. Der Text gleitet aus einem unsichtbaren Container hervor. Perfekt für H1-Titel.

Creating Digital

Experiences

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<h1 class="reveal-text">
<div class="line-mask">
<div class="line-inner">Creating Digital</div>
</div>
<div class="line-mask">
<div class="line-inner">Experiences</div>
</div>
</h1>

.line-mask {
  overflow: hidden; /* Der Schlüssel zum Masking-Effekt */
  display: block;
  line-height: 1.1;
}

.line-inner {
  transform: translateY(100%); /* Startposition: Außerhalb der Maske */
  display: block;
}

gsap.registerPlugin(ScrollTrigger);

gsap.to(".line-inner", {
  y: 0,
  duration: 1.5,
  ease: "power4.out",
  stagger: 0.1, // Verzögerung zwischen den Zeilen
  scrollTrigger: {
    trigger: ".reveal-text",
    start: "top 80%"
  }
});

2. BLUR REVEAL (THE CINEMATIC)

Ein moderner, cinematographischer Effekt. Der Text wird unscharf und transparent eingeblendet, was extrem hochwertig wirkt.

C I N E M A

<h2 class="blur-text">
  <span class="char">C</span>
  <span class="char">I</span>
  <span class="char">N</span>
  <span class="char">E</span>
  <span class="char">M</span>
  <span class="char">A</span>
</h2>

.char {
  display: inline-block;
  opacity: 0; /* Startzustand */
  filter: blur(10px); /* Startzustand */
}

gsap.to(".char", {
  filter: "blur(0px)",
  opacity: 1,
  duration: 1.5,
  stagger: 0.1,
  ease: "power2.out",
  scrollTrigger: {
    trigger: ".blur-text",
    start: "top 80%"
  }
});

3. ROLLING TEXT (THE ELEVATE)

Ein technischer, präziser Look. Die Buchstaben rotieren 3D-mäßig von unten nach oben rein – perfekt für "High-Tech" Vibes.

E L E V A T E

<h2 class="rolling-text">
  <div class="wrapper">
    <span class="char">E</span>
    <span class="char">L</span>
    <span class="char">E</span>
    <span class="char">V</span>
    <span class="char">A</span>
    <span class="char">T</span>
    <span class="char">E</span>
  </div>
</h2>

.wrapper {
  overflow: hidden; /* Maskiert den Text */
}
.char {
  display: inline-block;
  transform-origin: 50% 50% -0.5em; /* WICHTIG für den 3D-Effekt */
  backface-visibility: hidden;
}

gsap.from(".char", {
  rotationX: -90,
  opacity: 0,
  y: "100%",
  stagger: 0.05,
  duration: 1,
  ease: "back.out(1.7)",
  scrollTrigger: {
    trigger: ".rolling-text",
    start: "top 80%"
  }
});

4. LIQUID DISTORTION (THE GLITCH)

Nutzt SVG-Filter für einen organischen, "schmelzenden" Look beim Erscheinen oder Hovern. High-End Wow-Effekt.

DISTORTION

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

<h1 id="liquid-text">DISTORTION</h1>

<!-- SVG Filter (versteckt) -->
<svg style="visibility: hidden; position: absolute;" width="0" height="0">
  <defs>
    <filter id="liquidFilter">
      <feTurbulence id="turb" type="fractalNoise" baseFrequency="0.1" numOctaves="2" result="warp" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>

#liquid-text {
  filter: url(#liquidFilter);
  font-family: inherit;
  font-size: 6rem;
  color: black;
}

// Animiere die Turbulenz-Attribute für den Bewegungseffekt
const turb = document.querySelector('#turb');
const timeline = gsap.timeline({ paused: true });

timeline.to(turb, {
  duration: 2,
  attr: { baseFrequency: '0.01' }, // "Beruhigt" das Wasser
  ease: "power2.out"
});

document.querySelector('#liquid-text').addEventListener('mouseenter', () => {
  timeline.restart();
});

5. CYBER DECRYPT (THE HACKER)

Der "Signature Move" dieser Website. Ein Decrypt-Effekt, der technische Kompetenz und "System-Zugriff" suggeriert.

SYSTEM ONLINE

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<h2 class="text-white scramble-target">SYSTEM ONLINE</h2>

.scramble-target {
  font-family: monospace; /* WICHTIG: Monospace verhindert Springen */
  color: #F2C94C; 
  display: inline-block; /* Für Width-Locking */
}

function playScramble(element) {
  const originalText = element.innerText;
  
  // 1. Lock Width & Height to prevent CLS (Layout Shifts)
  const rect = element.getBoundingClientRect();
  element.style.width = Math.ceil(rect.width) + "px";
  element.style.display = "inline-block";
  element.style.whiteSpace = "nowrap"; // Verhindert Zeilenumbruch

  const chars = "!@#$%^&*()_+-=[]{}|;:,.<>?/~`";
  let obj = { value: 0 };
  let scrambleCache = [];
  let lastUpdate = 0;
  
  gsap.to(obj, {
    value: 1,
    duration: 2.5,
    ease: "power2.out",
    onUpdate: () => {
      const now = Date.now();
      const shouldUpdateRandoms = now - lastUpdate > 80;
      if (shouldUpdateRandoms) lastUpdate = now;

      let result = "";
      for (let i = 0; i < originalText.length; i++) {
        if (obj.value * originalText.length > i) {
           result += originalText[i];
        } else {
           if (!scrambleCache[i] || shouldUpdateRandoms) {
              scrambleCache[i] = chars[Math.floor(Math.random() * chars.length)];
           }
           result += scrambleCache[i];
        }
      }
      element.innerText = result;
    }
  });
} 

ScrollTrigger.create({
  trigger: ".scramble-target",
  start: "top 80%",
  onEnter: () => playScramble(document.querySelector(".scramble-target"))
});

ÜBER DEN AUTOR

Ich bin Alex Kiritschenko und verbinde als Senior SEO Consultant fundierte B2B-Expertise mit innovativen KI-Strategien für maximale digitale Sichtbarkeit. Mein Fokus liegt auf der Kombination aus Kreativität und generativer KI, um effektive und skalierbare Ergebnisse zu erzielen.