Text Animation Collection

GSAP Text Animations: Engaging ways to bring words to life.

Q: Can I combine multiple text animation techniques?

Yes. GSAP timelines let you sequence and layer effects—for example, a fade-in followed by a scramble, then a color shift. Use timeline labels and staggers for complex choreography.

Text animations can do more than just draw attention. With GSAP, you can create sophisticated, performant text effects — ranging from simple fades to advanced scrambles and typewriters.

Browse Effects

ON SCREEN: — 0 / 50

85 Text Effects, Ready to Use

Every effect includes live preview, source code, and a one-click copy button.

Fade-In Effect

gsap.from(".text", {
  opacity: 0,
  y: 30,
  duration: 1,
  ease: "power2.out"
});

Scale-Up Effect

gsap.from(".text", {
  scale: 0,
  opacity: 0,
  duration: 0.8,
  ease: "back.out(1.7)"
});

Rotate-In Effect

gsap.from(".text", {
  rotation: -90,
  opacity: 0,
  transformOrigin: "left bottom",
  duration: 1,
  ease: "power3.out"
});

Slide-From-Left

Slide From Left

gsap.from(".text", {
  x: -200,
  opacity: 0,
  duration: 1,
  ease: "power2.out"
});

Staggered Letters

// Wrap each character in a span first
gsap.from(".char", {
  y: 50,
  opacity: 0,
  stagger: 0.03,
  duration: 0.6,
  ease: "back.out(1.7)"
});

Zoom-Out Effect

gsap.from(".text", {
  scale: 3,
  opacity: 0,
  duration: 1.2,
  ease: "power4.out"
});

Flip-X Effect

gsap.from(".text", {
  rotationX: 90,
  opacity: 0,
  transformPerspective: 800,
  duration: 1,
  ease: "power3.out"
});

Flip-Y Effect

gsap.from(".text", {
  rotationY: 90,
  opacity: 0,
  transformPerspective: 800,
  duration: 1,
  ease: "power3.out"
});

Bounce-In Effect

gsap.from(".text", {
  y: -100,
  opacity: 0,
  duration: 1,
  ease: "bounce.out"
});

Skew-In Effect

gsap.from(".text", {
  skewX: 30,
  x: -100,
  opacity: 0,
  duration: 1,
  ease: "power3.out"
});

PARALLAX

Parallax

scroll-driven depth

Parallax Text

// Multi-layer parallax
gsap.to(".back",  { y: -80, scrollTrigger: { scrub: true } });
gsap.to(".mid",   { y: -40, scrollTrigger: { scrub: true } });
gsap.to(".front", { y: -20, scrollTrigger: { scrub: true } });

Glitch Effect

// Rapid x/skew jitter via timeline
const tl = gsap.timeline({ repeat: 2 });
tl.to(".text", { x: -3, skewX: 10, duration: 0.05 })
  .to(".text", { x: 3, skewX: -8, duration: 0.05 })
  .to(".text", { x: 0, skewX: 0, duration: 0.05 });

Typewriter Effect

gsap.to(".text", {
  text: "Hello, World!",
  duration: 2,
  ease: "none",
  // Requires TextPlugin
});

Text Scramble

gsap.to(".text", {
  text: { value: "DECODED", chars: "XO!#" },
  duration: 1.5,
  ease: "none",
  // Requires TextPlugin with scrambleText
});

Wave Color Shift

// Per-character wave with color
gsap.from(".char", {
  y: 40, color: "#00FF66", opacity: 0,
  stagger: { each: 0.04, from: "start" },
  duration: 0.6, ease: "sine.out"
});

Elastic Snap

gsap.from(".text", {
  x: -300, opacity: 0,
  duration: 1.5, ease: "elastic.out(1, 0.3)"
});

Rubber Band

gsap.from(".text", {
  scaleX: 1.8, scaleY: 0.4, opacity: 0,
  duration: 1, ease: "elastic.out(1.2, 0.4)"
});

Gravity Fall

gsap.from(".char", {
  y: -300, opacity: 0, stagger: 0.05,
  duration: 0.8, ease: "bounce.out"
});

Magnetic Pull

gsap.from(".char", {
  x: () => gsap.utils.random(-200, 200),
  y: () => gsap.utils.random(-200, 200),
  opacity: 0, rotation: () => gsap.utils.random(-90, 90),
  stagger: 0.02, duration: 1, ease: "power3.out"
});

Slot Machine

gsap.from(".char", {
  yPercent: -500,
  stagger: { each: 0.08, from: "start" },
  duration: 0.6, ease: "power4.out"
});

Spin In

gsap.from(".text", {
  rotation: 720, scale: 0, opacity: 0,
  duration: 1.2, ease: "power4.out"
});

Whip Slide

gsap.from(".text", {
  x: -600, rotation: -10,
  duration: 0.8, ease: "back.out(1.4)"
});

Spring Scale

gsap.from(".text", {
  scale: 0, opacity: 0,
  duration: 1.5, ease: "elastic.out(1, 0.3)"
});

Neon Flicker

const tl = gsap.timeline();
tl.set(".text", { opacity: 0 })
  .to(".text", { opacity: 1, duration: 0.1 })
  .to(".text", { opacity: 0.2, duration: 0.05 })
  .to(".text", { opacity: 1, duration: 0.1 })
  .to(".text", { opacity: 0, duration: 0.05 })
  .to(".text", { opacity: 1, textShadow: "0 0 20px #00FF66", duration: 0.3 });

Matrix Rain

gsap.from(".char", {
  y: -100, opacity: 0,
  stagger: { each: 0.05, from: "random" },
  duration: 0.5, ease: "power2.out"
});

CRT Boot

const tl = gsap.timeline();
tl.from(".preview", { scaleY: 0.005, duration: 0.4, ease: "power2.out" })
  .from(".text", { opacity: 0, filter: "blur(10px)", duration: 0.5 })
  .to(".text", { textShadow: "0 0 10px #0f0", duration: 0.3 });

Binary Decode

gsap.to(".text", {
  text: { value: "DECODED", chars: "01", speed: 0.3 },
  duration: 2.5, ease: "none"
});

RGB Split

const tl = gsap.timeline();
tl.from(".rgb-r", { x: -20, opacity: 0, duration: 0.3 })
  .from(".rgb-g", { opacity: 0, duration: 0.2 }, "<")
  .from(".rgb-b", { x: 20, opacity: 0, duration: 0.3 }, "<")
  .to(".rgb-r", { x: 0, duration: 0.5 })
  .to(".rgb-b", { x: 0, duration: 0.5 }, "<");

Cascade Reveal

gsap.from(".char", {
  y: -80, rotation: -15, opacity: 0,
  stagger: { each: 0.04, from: "start" },
  duration: 0.5, ease: "back.out(1.4)"
});

Spotlight Reveal

gsap.from(".char", {
  opacity: 0.1, scale: 0.8, filter: "blur(4px)",
  stagger: { each: 0.06, from: "center" },
  duration: 0.4, ease: "power2.out"
});

Domino Fall

gsap.from(".char", {
  rotationZ: -90, transformOrigin: "bottom left",
  opacity: 0, stagger: 0.06,
  duration: 0.5, ease: "power3.out"
});

Popcorn Pop

gsap.from(".char", {
  scale: 0, y: 30,
  rotation: () => gsap.utils.random(-20, 20),
  stagger: { each: 0.04, from: "random" },
  duration: 0.4, ease: "back.out(2)"
});

Pendulum Swing

gsap.from(".char", {
  rotation: 90, transformOrigin: "top center",
  opacity: 0, stagger: 0.05,
  duration: 1, ease: "elastic.out(1, 0.5)"
});

Spiral In

gsap.from(".char", {
  x: (i) => Math.cos(i) * 100,
  y: (i) => Math.sin(i) * 100,
  rotation: 360, scale: 0, opacity: 0,
  stagger: 0.04, duration: 0.8, ease: "power3.out"
});

Wavy Baseline

gsap.to(".char", {
  y: -20,
  stagger: { each: 0.06, from: "start", repeat: -1, yoyo: true },
  duration: 0.4, ease: "sine.inOut"
});

Ink Bleed

gsap.from(".text", {
  filter: "blur(20px)", opacity: 0, scale: 0.9,
  duration: 1.5, ease: "power2.out"
});

Reveal Wipe

gsap.from(".text", {
  clipPath: "inset(0 100% 0 0)",
  duration: 1.2, ease: "power3.inOut"
});

Shadow Pulse

gsap.fromTo(".text",
  { textShadow: "0 0 0px #00FF66" },
  { textShadow: "0 0 30px #00FF66, 0 0 60px #00FF66",
    duration: 1, yoyo: true, repeat: 2, ease: "sine.inOut" }
);

00,000

Morphing Counter

let obj = { val: 0 };
gsap.to(obj, {
  val: 99999, duration: 2, ease: "power2.out",
  onUpdate: () => el.textContent = Math.round(obj.val).toLocaleString()
});

Typewriter Delete

const tl = gsap.timeline();
tl.to(".text", { text: "Typo Hree", duration: 0.8, ease: "none" })
  .to(".text", { text: "Typ", duration: 0.4, ease: "none", delay: 0.3 })
  .to(".text", { text: "Typewriter Delete", duration: 1, ease: "none" });

Shuffle These Words

Word Shuffle

gsap.from(".word", {
  x: () => gsap.utils.random(-100, 100),
  y: () => gsap.utils.random(-50, 50),
  opacity: 0, rotation: () => gsap.utils.random(-15, 15),
  stagger: 0.1, duration: 0.8, ease: "power3.out"
});

Fade Up Words

gsap.from(".word", {
  y: 40, opacity: 0, stagger: 0.15,
  duration: 0.8, ease: "power2.out"
});

Slide From Right

gsap.from(".text", {
  x: 200, opacity: 0,
  duration: 1, ease: "power2.out"
});

Slide Up Reveal

gsap.from(".text", {
  yPercent: 100,
  duration: 0.8, ease: "power3.out"
});

Cross Fade

gsap.from(".text", {
  opacity: 0, scale: 0.95, filter: "blur(8px)",
  duration: 1.2, ease: "power2.out"
});

Blur In

gsap.from(".text", {
  opacity: 0, filter: "blur(20px)", y: 20,
  duration: 1, ease: "power2.out"
});

Unfold 3D

gsap.from(".text", {
  rotationY: -90, rotationX: 45, opacity: 0, scale: 0.5,
  transformPerspective: 800,
  duration: 1.2, ease: "power3.out"
});

Drop & Shatter

const tl = gsap.timeline();
tl.from(".text", { y: -200, opacity: 0, duration: 0.4, ease: "power4.in" })
  .to(".char", { y: () => gsap.utils.random(60, 200),
    rotation: () => gsap.utils.random(-30, 30),
    opacity: 0, stagger: 0.02, duration: 0.6 });

Scroll Driven

Scroll Scrub

gsap.from(".text", {
  x: -200, opacity: 0,
  scrollTrigger: { trigger: ".section",
    start: "top center", end: "bottom center", scrub: 1
  }
});

0

Scroll Counter

let obj = { val: 0 };
gsap.to(obj, {
  val: 10000, ease: "none",
  scrollTrigger: { trigger: ".section", scrub: true },
  onUpdate: () => el.textContent = Math.round(obj.val).toLocaleString()
});

Stretch Warp

gsap.from(".text", {
  scaleX: 4, scaleY: 0.2, opacity: 0,
  duration: 1, ease: "elastic.out(1, 0.4)"
});

Cinema Title

gsap.from(".text", {
  letterSpacing: "2em", opacity: 0,
  duration: 2, ease: "power3.inOut"
});

Stencil Fill

gsap.to(".text", {
  color: "#00FF66",
  webkitTextStroke: "0px transparent",
  duration: 1.5, ease: "power2.inOut"
});

Earthquake

const tl = gsap.timeline();
for (let i = 0; i < 8; i++) {
  const intensity = 12 * (1 - i / 8);
  tl.to(".text", { x: gsap.utils.random(-intensity, intensity),
    y: gsap.utils.random(-intensity * 0.5, intensity * 0.5),
    rotation: gsap.utils.random(-3, 3), duration: 0.05 });
}
tl.to(".text", { x: 0, y: 0, rotation: 0, duration: 0.3 });

Heartbeat

const tl = gsap.timeline({ repeat: 2 });
tl.to(".text", { scale: 1.15, duration: 0.1, ease: "power2.in" })
  .to(".text", { scale: 1, duration: 0.1 })
  .to(".text", { scale: 1.25, duration: 0.12 })
  .to(".text", { scale: 1, duration: 0.3, ease: "power2.out" });

Flip Board

// Airport departure board style
gsap.from(".char", {
  rotationX: -90, transformOrigin: "50% 0%",
  opacity: 0, stagger: { each: 0.1, from: "start" },
  duration: 0.3, ease: "power2.out"
});

Neon Sign

// Each letter flickers on individually
const tl = gsap.timeline();
chars.forEach((ch, i) => {
  tl.set(ch, { opacity: 0 })
    .to(ch, { opacity: 1, duration: 0.05 }, i * 0.15)
    .to(ch, { opacity: 0.3, duration: 0.03 }, i * 0.15 + 0.05)
    .to(ch, { opacity: 1, textShadow: "0 0 10px #00FF66",
      duration: 0.1 }, i * 0.15 + 0.08);
});

Smoke Rise

gsap.from(".text", {
  y: 60, opacity: 0,
  filter: "blur(15px) brightness(2)",
  scale: 1.1, duration: 1.5, ease: "power2.out"
});

Ghost Trail

const tl = gsap.timeline();
tl.from(".ghost-1", { x: -300, opacity: 0.5, duration: 0.6 })
  .from(".ghost-2", { x: -400, opacity: 0.3, duration: 0.7 }, "<0.1")
  .from(".main", { x: -200, opacity: 0, duration: 0.8 }, "<0.1")
  .to(".ghost-1", { opacity: 0, filter: "blur(4px)", duration: 0.5 })
  .to(".ghost-2", { opacity: 0, filter: "blur(8px)", duration: 0.5 }, "<");

Vertical Blinds

gsap.from(".char", {
  scaleX: 0, opacity: 0,
  stagger: { each: 0.04, from: "edges" },
  duration: 0.4, ease: "power2.out"
});

Liquid Fill

gsap.from(".text", {
  clipPath: "inset(100% 0 0 0)",
  duration: 1.5, ease: "power2.out"
});

Pinball

gsap.from(".char", {
  x: () => gsap.utils.random(-300, 300),
  y: () => gsap.utils.random(-200, 200),
  scale: 2, opacity: 0,
  stagger: { each: 0.06, from: "random" },
  duration: 0.5, ease: "back.out(1.2)"
});

Firework Burst

const tl = gsap.timeline();
tl.set(".char", { scale: 0, opacity: 0 })
  .from(".char", { scale: 3, opacity: 0,
    stagger: { each: 0.03, from: "center" },
    duration: 0.6, ease: "power4.out"
  });

Origami Unfold

gsap.from(".char", {
  rotationY: -90, rotationX: 45,
  transformOrigin: "left center",
  opacity: 0, stagger: 0.05,
  duration: 0.8, ease: "power3.out"
});

Ripple Wave

gsap.from(".char", {
  y: (i) => Math.sin(i * 0.8) * 60,
  scale: (i) => 0.5 + Math.abs(Math.sin(i * 0.8)) * 0.5,
  opacity: 0, stagger: 0.03,
  duration: 0.8, ease: "elastic.out(1, 0.6)"
});

Rubber Stamp

gsap.from(".text", {
  scale: 4, rotation: -15, opacity: 0,
  duration: 0.3, ease: "power4.in",
  onComplete: () => gsap.to(".text", {
    scale: 1, rotation: 0, duration: 0.6, ease: "elastic.out(1, 0.4)"
  })
});

Perspective Fly

gsap.from(".text", {
  z: -2000, opacity: 0,
  transformPerspective: 500,
  duration: 1.5, ease: "power3.out"
});

Curtain Reveal

gsap.from(".text", {
  clipPath: "inset(0 50% 0 50%)",
  duration: 1, ease: "power3.inOut"
});

VHS Tracking

const tl = gsap.timeline();
tl.set(".text", { opacity: 0.7, skewX: 5 })
  .to(".text", { x: -10, skewX: -8, duration: 0.06, repeat: 4, yoyo: true })
  .to(".text", { x: 0, skewX: 0, opacity: 1, duration: 0.3 })
  .to(".text", { x: 5, opacity: 0.6, duration: 0.04 }, "+=0.5")
  .to(".text", { x: 0, opacity: 1, duration: 0.2 });

Bounce Settle

const tl = gsap.timeline();
tl.from(".text", { y: -300, duration: 0.4, ease: "power3.in" })
  .to(".text", { y: -60, duration: 0.2, ease: "power2.out" })
  .to(".text", { y: 0, duration: 0.2, ease: "power2.in" })
  .to(".text", { y: -20, duration: 0.15, ease: "power2.out" })
  .to(".text", { y: 0, duration: 0.15, ease: "power2.in" });

GSAP makes it easy to animate any element on the page with buttery-smooth performance.

Each line can reveal independently, creating a natural reading flow that guides the eye.

This technique works beautifully for hero sections, about pages, and storytelling layouts.

Line-by-Line Reveal

gsap.from(".line", {
  y: 30, opacity: 0,
  stagger: 0.2, duration: 0.8, ease: "power2.out"
});

Beautiful animations start with a single word and build into something extraordinary one piece at a time.

Word-by-Word Build

gsap.from(".word", {
  opacity: 0, y: 15,
  stagger: 0.06, duration: 0.5, ease: "power2.out"
});

Every word in this paragraph will light up as you scroll through it, creating a karaoke-style reading experience that keeps your visitors engaged and focused on the content.

Scroll Highlight

gsap.to(".word", {
  color: "#fff",
  stagger: 0.1,
  scrollTrigger: { trigger: ".paragraph",
    start: "top center", end: "bottom center", scrub: true }
});

This classified information was previously hidden behind redaction bars. Watch as each line is declassified and the secret content is revealed to the reader.

Redacted Reveal

// Set each word with white gradient overlay
word.style.backgroundImage = "linear-gradient(#fff, #fff)";
word.style.backgroundSize = "100% 100%";
word.style.color = "transparent";

// Reveal: shrink bars & show text
gsap.to(".word", {
  backgroundSize: "0% 100%", color: "#fff",
  stagger: 0.08, duration: 0.2, ease: "power2.in"
});

The first sentence comes into sharp focus while everything else stays soft.

Then attention shifts to the second line as the first gently blurs away.

Finally the last line sharpens, completing the cinematic depth-of-field effect.

Focus Pull

const tl = gsap.timeline();
lines.forEach((line, i) => {
  tl.to(line, { filter: "blur(0px)", opacity: 1, duration: 0.5 })
    .to(line, { filter: "blur(3px)", opacity: 0.4, duration: 0.3 }, "+=0.8");
});

Typewriter Paragraph

gsap.to(".text", {
  text: "Your full paragraph text here...",
  duration: 4, ease: "none"
});

A gradient of color sweeps through this paragraph from left to right, painting each word with vibrant green as it passes through like a wave of light.

Color Wash

gsap.to(".word", {
  color: "#00FF66",
  stagger: 0.05, duration: 0.3, ease: "none",
  onComplete: () => gsap.to(".word", { color: "#fff",
    stagger: 0.05, duration: 0.4, delay: 0.5 })
});

█▓▒░ ▒█▓░ █▒▓░ ▓█▒░ █▓▒░ ▒█▓░

░▓█▒ ▓▒█░ ▒░█▓ █░▓▒ ▓█░▒ ░▒▓█

▒░▓█ █▒░▓ ▓░▒█ ░█▓▒ ▒▓░█ ▓▒█░

Scramble Decode

lines.forEach((line, i) => {
  gsap.to(line, {
    text: { value: sentences[i], chars: "█▓▒░" },
    duration: 1.5, ease: "none", delay: i * 0.8
  });
});

Lines drop from above and land with a satisfying bounce.

Each one stacks neatly below the previous line.

Building a complete paragraph with playful physics.

Gravity Stack

gsap.from(".line", {
  y: -200, opacity: 0,
  stagger: 0.3, duration: 0.6, ease: "bounce.out"
});

As you scroll through this content, a green underline highlights each line you read, creating an elegant progress indicator that follows your reading pace.

Progress Underline

gsap.to(".word", {
  backgroundSize: "100% 2px",
  stagger: 0.05, duration: 0.2, ease: "none",
  scrollTrigger: { scrub: true }
});

This sentence slides in from the left side of the screen.

While this one arrives from the opposite direction.

And the final line comes back from the left again.

Sentence Cascade

gsap.from(".line", {
  x: (i) => i % 2 === 0 ? -200 : 200,
  opacity: 0, stagger: 0.25,
  duration: 0.8, ease: "power3.out"
});

This entire paragraph starts compressed into a single line and then unfurls to its full height, revealing all the content in an elegant expanding motion that draws the reader in naturally.

Paragraph Unfurl

gsap.from(".paragraph", {
  height: "1.5em", opacity: 0.5,
  duration: 1.2, ease: "power3.inOut"
});

Text bleeds outward from the center of this paragraph, spreading like ink on paper. Each word radiates from the middle, creating an organic reveal.

Ink Drop Spread

gsap.from(".word", {
  opacity: 0, scale: 0, filter: "blur(4px)",
  stagger: { each: 0.03, from: "center" },
  duration: 0.5, ease: "power2.out"
});

Each line moves at a different speed.

Creating a subtle sense of depth.

As if the text exists on separate layers.

Parallax Lines

lines.forEach((line, i) => {
  gsap.to(line, {
    y: -30 * (i + 1),
    scrollTrigger: { trigger: section, scrub: true }
  });
});

DIRECTED BY

GSAP MOTION STUDIO

PRODUCED BY

GREENSOCK INC.

ANIMATION BY

GSAPIFY.COM

Film Credits

gsap.from(".credit", {
  y: 200, opacity: 0,
  stagger: 0.3, duration: 1.2, ease: "power2.out"
});

Why Text Animations Matter

Text forms the backbone of most web experiences — but static words on a screen can blend into the background. Animating text with GSAP breathes life into your site's messaging, making it more memorable, engaging, and emotionally resonant.

Captivating First Impressions

Animated text can grab user attention the moment they land on your page.

Guided User Focus

Subtle reveals or typewriter effects direct viewers to your core messages.

Brand Identity & Storytelling

Motion reinforces your brand's personality — playful, elegant, or anything in between.

Better User Engagement

Dynamic visuals encourage users to spend more time on your site and explore further.

In the next section, we'll explore several top text animation techniques you can implement right away.

Techniques

Top Text Animation Techniques

Typewriter Effect

The typewriter effect simulates text being typed out character by character, creating a sense of anticipation. It's perfect for hero headlines or introductory sections where you want to build excitement.

Hero Sections Headlines TextPlugin

Text Scramble

The scramble effect randomizes letters before settling on the final word or phrase, giving a techy, futuristic feel. Ideal for product launches, portfolio sites, or any place you want a hint of mystery.

Product Launches Portfolios ScrambleText

Text Reveal

Gradual reveals or sliding text transitions add sophistication to headings and subheadings. Whether you fade in letters or slide entire lines, GSAP's smooth transitions ensure a polished impression.

Headings SplitText Clip-path

Wave / Staggered Animations

By animating each character or line on a slight delay, you can create a wave-like effect that adds personality and flow. Perfect for headers, callouts, or any section where you want a unique, rhythmic motion.

Stagger Per-character Wave Motion

Pro Tips

Best Practices & Performance Tips

Even the most captivating GSAP text animations need to remain performant and accessible. Keep these pointers in mind:

Use Subtle Motion

Overly flashy text animations can overshadow your core message.

Optimize DOM Elements

If you're splitting text into many <span> tags, consider using GSAP's SplitText plugin to handle parsing efficiently.

Choose Easing Wisely

Natural easing curves (e.g., easeInOut) make text transitions feel organic.

Responsive Design

Ensure your text remains legible and animates smoothly on mobile devices.

Accessibility Considerations

Keep heading structures logical; avoid rapidly flashing or jarring movements that can impact screen readers and users with motion sensitivity.

AI-Powered Tool

Using the GSAPify Generator for Text Animations

Our AI-powered GSAPify Generator streamlines your workflow by letting you set duration, easing, delays, and more in an intuitive interface. Watch your text animation come to life in real time, tweak it until it's perfect, and then copy the code into your project.

Whether you need a subtle text fade or a complex scramble, the generator does the heavy lifting. Look out for future updates featuring advanced timeline editing and additional preset animations tailored to text elements.

Try the Generator

generator.js

gsap.to(".headline", {
  text: "Hello, World!",
  duration: 2,
  ease: "none"
});

More Text Animation Examples

Curious to see these techniques in action? Explore these demos and tutorials:

Advanced Text Reveal

Multi-layer clip-path reveals with staggered timing.

Typing + Scramble Combo

Chain typewriter into scramble for dramatic entrances.

Step-by-Step Wave Tutorial

Build a per-character wave animation from scratch.

GSAP Text Animation Wrap Up

Animated text can elevate an ordinary paragraph into an immersive experience. By applying techniques like typewriter, scramble, and wave effects, you're transforming how users perceive your brand or story. Remember to keep accessibility and performance in mind so everyone can enjoy your content.

Ready to bring your ideas to life? Explore our effects library, experiment with the generator, or check out our guides to learn advanced animation techniques.

Effects Library AI Generator ScrollTrigger Guide

FAQ

Common
Questions

Absolutely. GSAP is framework-agnostic, so it works seamlessly with React, Angular, Vue, or plain JavaScript. Just make sure you initialize your animations after the component has rendered to avoid timing conflicts.

Properly implemented GSAP animations are efficient and lightweight. If you're animating multiple lines of text, consider using SplitText or a canvas-based approach for very heavy effects.

SplitText makes per-character and per-word animations much easier, but you can achieve many effects by manually wrapping text in span elements. SplitText automates this and handles revert/cleanup.

Use prefers-reduced-motion media queries to disable or simplify animations for users who prefer less motion. Keep heading structures logical and avoid rapidly flashing text.

Yes. GSAP timelines let you sequence and layer effects — for example, a fade-in followed by a scramble, then a color shift. Use timeline labels and staggers for complex choreography.

Level Up with GSAP Courses

Your complete roadmap to mastering GSAP — coming soon.

From Basics to Brilliance

Go from first-time animator to advanced motion designer in clear, guided steps.

Hands-On Projects

Build real-world animations — text reveals, scroll-based parallax, and more.

Expert-Led Insights

Learn proven techniques from developers who live and breathe GSAP.

Related Guides

Complete Guide

Sign In

You've Hit Your Limit

GSAP Text Animations: Engaging ways to bring words to life.

85 Text Effects, Ready to Use

Fade-In Effect

Fade-In Effect

Scale-Up Effect

Scale-Up Effect

Rotate-In Effect

Rotate-In Effect

Slide-From-Left

Slide From Left

Staggered Letters

Staggered Letters

Zoom-Out Effect

Zoom-Out Effect

Flip-X Effect

Flip-X Effect

Flip-Y Effect

Flip-Y Effect

Bounce-In Effect

Bounce-In Effect

Skew-In Effect

Skew-In Effect

PARALLAX

Parallax

scroll-driven depth

Parallax Text

Glitch Effect

Glitch Effect

Typewriter Effect

Text Scramble

Text Scramble

Wave Color Shift

Wave Color Shift

Elastic Snap

Elastic Snap

Rubber Band

Rubber Band

Gravity Fall

Gravity Fall

Magnetic Pull

Magnetic Pull

Slot Machine

Slot Machine

Spin In

Spin In

Whip Slide

Whip Slide

Spring Scale

Spring Scale

Neon Flicker

Neon Flicker

Matrix Rain

Matrix Rain

CRT Boot

CRT Boot

Binary Decode

Binary Decode

RGB Split

RGB Split

RGB Split

RGB Split

Cascade Reveal

Cascade Reveal

Spotlight Reveal

Spotlight Reveal

Domino Fall

Domino Fall

Popcorn Pop

Popcorn Pop

Pendulum Swing

Pendulum Swing

Spiral In

Spiral In

Wavy Baseline

Wavy Baseline

Ink Bleed

Ink Bleed

Reveal Wipe