GSAP Text Animations: 5 Copy-Paste Examples

Contents

1. REVEAL & MASK
2. BLUR REVEAL
3. ROLLING TEXT
4. LIQUID DISTORTION
5. CYBER DECRYPT

Text doesn't have to be static anymore. In modern web design, typography is an active UI element that responds to scrolling, mouse movement and user interaction.

Here are 5 exceptional animations that go far beyond the standard "fade in".

1. REVEAL & MASK (THE ARCHITECT)

The go-to effect for clean, editorial layouts. The text slides up out of an invisible mask. Perfect for H1 headings.

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; /* The key to the masking effect */
  display: block;
  line-height: 1.1;
}

.line-inner {
  transform: translateY(100%); /* Start position: outside the mask */
  display: block;
}

gsap.registerPlugin(ScrollTrigger);

gsap.to(".line-inner", {
  y: 0,
  duration: 1.5,
  ease: "power4.out",
  stagger: 0.1, // Delay between the lines
  scrollTrigger: {
    trigger: ".reveal-text",
    start: "top 80%"
  }
});

2. BLUR REVEAL (THE CINEMATIC)

A modern, cinematic effect. The text fades in from blurred and transparent to sharp, which looks incredibly high-end.

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; /* Initial state */
  filter: blur(10px); /* Initial state */
}

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)

A precise, technical look. The letters roll up into place in 3D – perfect for 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; /* Masks the text */
}
.char {
  display: inline-block;
  transform-origin: 50% 50% -0.5em; /* IMPORTANT for the 3D effect */
  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)

Uses SVG filters to create an organic, "melting" look when the text appears or on hover. A real wow effect.

DISTORTION

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

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

<!-- SVG filter (hidden) -->
<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>

READY TO GROW?

Let's review your setup and uncover untapped potential.

START YOUR PROJECT

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

// Animate the turbulence attributes for the motion effect
const turb = document.querySelector('#turb');
const timeline = gsap.timeline({ paused: true });

timeline.to(turb, {
  duration: 2,
  attr: { baseFrequency: '0.01' }, // "Calms" the water
  ease: "power2.out"
});

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

5. CYBER DECRYPT (THE HACKER)

The signature move of this website. A decryption effect that signals technical expertise and "system access".

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; /* IMPORTANT: monospace prevents jumping */
  color: #F2C94C; 
  display: inline-block; /* For 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"; // Prevents line breaks

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

ABOUT THE AUTHOR

I'm Alex Kiritschenko, a Senior SEO Consultant. I combine solid B2B experience with AI-driven strategies to maximize digital visibility. My focus is on using creativity and generative AI to deliver effective, scalable results.