Summarize this article with:
Static text is invisible. In a web full of motion, headlines that just sit there get scrolled past without a second glance.
JavaScript text animation examples show you how to make typography move, reveal, and react in ways that stop visitors mid-scroll.
This guide covers 10 working code snippets you can use today. Typewriter effects, text scrambles, particle explosions, scroll-triggered reveals.
You’ll learn which animation libraries fit different project needs, from lightweight Anime.js to the industry-standard GSAP.
Plus, step-by-step instructions for building your own animated text from scratch using vanilla JavaScript and CSS transforms.
What is JavaScript Text Animation
JavaScript text animation is a technique that transforms static typography into moving, interactive visual elements on web pages.
Characters slide in. Words fade. Headlines bounce and scramble before your eyes.
These effects rely on DOM manipulation combined with timing functions to create smooth transitions.
The browser’s requestAnimationFrame method handles frame-by-frame rendering at 60fps, while CSS transform properties manage the visual changes.
Unlike pure CSS text animations, JavaScript provides programmatic control over every character, word, and line.
You can trigger effects based on user input, scroll position, or any custom logic.
Libraries like GSAP, Anime.js, and Splitting.js have made kinetic typography accessible to developers without deep animation expertise.
The result? Websites that capture attention immediately and keep visitors engaged longer.
JavaScript Text Animation Examples To Check Out
Laser Writing Text Animation
See the Pen
Laser Writer by Johan Karlsson (@DonKarlssonSan)
on CodePen.
Dark Text Animation
See the Pen
Dark Text Animation by Álvaro (@alvarotrigo)
on CodePen.
Shattering Text Animation
See the Pen
Shattering Text Animation by Arsen Zbidniakov (@ARS)
on CodePen.
Typography Animation
See the Pen
Typography Animation by Georgi Nikolov (@gbnikolov)
on CodePen.
Interactive Variable Text
See the Pen
Interactive Variable Text by JennyBKowalski (@JennyBKowalski)
on CodePen.
THREE JS Text Animation
See the Pen
THREE Text Animation #1 by Szenia Zadvornykh (@zadvorsky)
on CodePen.
Crossing on Scroll
See the Pen
Crossing on scroll by Álvaro (@alvarotrigo)
on CodePen.
Solid
See the Pen
Solid by Cyd Stumpel (@Sidstumple)
on CodePen.
Hand written SVG text animation
See the Pen
Hand written SVG text animation by Matthew Ellis (@mellis84)
on CodePen.
Text animation with Snap SVG
See the Pen
Text animation with Snap SVG by alticreation (@alticreation)
on CodePen.
Resizable Logo
See the Pen
Resizable Logo! | @keyframers 3.11 by @keyframers (@keyframers)
on CodePen.
Mouse Following Text Animation
See the Pen
Mouse Following Text Animation by Aykut Kapısız (@aykutkapisiz)
on CodePen.
Text typing animation effect HTML, CSS & JS
See the Pen
Text typing animation effect HTML, CSS & JS by Álvaro (@alvarotrigo)
on CodePen.
Mark Text Effect on Scroll with IO
See the Pen
Mark text effect on scroll w/ IO by Mattia Astorino (@equinusocio)
on CodePen.
Greensock Text Animation
See the Pen
Greensock Text Animation by Joseph Banegas (@jbanegas)
on CodePen.
Simple Typing Carousel
See the Pen
Simple Typing Carousel by SS (@CheeseTurtle)
on CodePen.
Variable Font Animation
See the Pen
Variable Font Animation by Tanner Dolby (@tannerdolby)
on CodePen.
Cool SVG Text Animation
See the Pen
SVG text animation by Cassie Evans (@cassie-codes)
on CodePen.
Unbreakable Kimmie Schmidt
See the Pen
Unbreakable Kimmie Schmidt by groovc (@groovc)
on CodePen.
In Too Deep
See the Pen
IN TOO DEEP by Alex Trost (@a-trost)
on CodePen.
Typing Effect Using Javascript
See the Pen
Typing effect using JavaScript – Day 10 of #30Days30Projects by Ishaan Sheikh (@sheikh_ishaan)
on CodePen.
Decode Text Effect
See the Pen
Decode Text Effect by Ben Racicot (@BRacicot)
on CodePen.
Splitting Splash
See the Pen
Splitting Splash 🌊 | Bouncy CSS Text Animation with Splitting.js | @keyframers 3.1 by @keyframers (@keyframers)
on CodePen.
Extended
See the Pen
EXTENDED by Chris Gannon (@chrisgannon)
on CodePen.
Scene.js Kinetic Typing Text Animation
See the Pen
Scene.js Kinetic Typing Animation by Daybrush (@daybrush)
on CodePen.
Motion Path Scaling
See the Pen
Motion path scaling by Michelle Barker (@michellebarker)
on CodePen.
“No Time To Die” Title Sequence
See the Pen
“No Time To Die” Title sequence by Nick Watton (@2Mogs)
on CodePen.
Canvas JavaScript Text Animation
See the Pen
JavaScript text animation on <canvas> by Mengru Zhang (@MengruZhang)
on CodePen.
3D Kinetic Typography
See the Pen
Kinetic Letters ✨ by Anna Zenn Scavenger (@ScavengerFrontend)
on CodePen.
Neumorphism Typo
See the Pen
Neumorphism Typo by ilithya (@ilithya)
on CodePen.
JavaScript Intro Text Animation
See the Pen
Intro text animation by Sampath Paravasthu (@SampathParavasthu)
on CodePen.
Spotlight Cursor Text Screen
See the Pen
Spotlight Cursor Text Screen by Caroline Artz (@carolineartz)
on CodePen.
Outlines and Overprints
See the Pen
Outlines and overprints by Jason Pamental (@jpamental)
on CodePen.
JavaScript Letter Animation
See the Pen
Letter Animation by Florin Pop (@FlorinPop17)
on CodePen.
Responsive Meandering Text W/ Splitting
See the Pen
Responsive meandering text w/ Splitting 😎 by Jhey (@jh3y)
on CodePen.
JavaScript Text Color Draw Animation
See the Pen
text color draw by CJ Gammon (@cjgammon)
on CodePen.
Animated SVG Signature
See the Pen
Animated SVG Signature by Silvestar Bistrović (@CiTA)
on CodePen.
Landing Animation for BBAE
See the Pen
[WIP] Landing Animation for BBAE by Dolphin Wood (@idiotWu)
on CodePen.
JavaScript Circle Text Typing Animation
See the Pen
SVG text typing along a spiral with JS by Margus Lillemägi (@VisualAngle)
on CodePen.
Anime.Js Logo Animation
See the Pen
anime.js logo animation by Julian Garnier (@juliangarnier)
on CodePen.
JavaScript Magic Text Animation BaffleJS
See the Pen
JavaScript Magic Text Animation BaffleJS by MIMAXUZ (@MIMAXUZ)
on CodePen.
Corrupted, Grungy, Retro Text and CRT Effect
See the Pen
Corrupted, Grungy, Retro Text and CRT Effect by Jacob Foster (@Alca)
on CodePen.
How JavaScript Text Animation Works
Text animation in JavaScript breaks down into three core operations: splitting text into animatable units, applying transformations, and controlling timing.
First, the text gets divided into spans wrapping individual characters, words, or lines.
Then JavaScript manipulates CSS properties like opacity, transform, and clip-path on each span.
Timing functions orchestrate when each piece moves, creating staggered sequences that feel organic.
Text Splitting Techniques
Character-by-character splitting wraps each letter in its own span element, enabling individual letter animation and precise control.
Word-by-word approaches work better for readable reveals, while line-by-line splitting suits paragraph animations.
Splitting.js automates this process, adding data attributes for easy CSS targeting and reducing manual markup.
Animation Timing and Easing
Duration controls how long each animation runs; delay determines when it starts relative to others.
Easing functions like ease-in, ease-out, and cubic-bezier curves make motion feel natural instead of robotic.
Stagger values offset each element’s start time, creating wave-like sequences across text.
Types of JavaScript Text Animations
Text animation effects fall into distinct categories based on their visual behavior and technical implementation.
Some reveal text progressively. Others distort, morph, or explode letters into particles.
Choosing the right type depends on your site’s purpose, brand personality, and user experience goals.
Typewriter Animations
Text appears letter by letter with a blinking cursor, mimicking someone typing in real-time.
Typed.js handles this effect with minimal setup, including backspace and multiple string rotation features.
Text Reveal Animations
Content emerges through masks, clips, or sliding movements that gradually expose the full message.
The CSS clip-path property combined with JavaScript timing creates clean geometric reveals.
Text Scramble Effects
Random characters cycle rapidly before settling into the final text, creating a decryption or matrix-style appearance.
Works well for tech brands, gaming sites, and anywhere you want a futuristic vibe.
Kinetic Typography
Text moves, rotates, scales, and transforms in response to timeline sequences or user interaction.
GSAP excels here with its timeline feature for complex, choreographed motion design.
Text Particle Effects
Letters break apart into dots, pixels, or custom shapes using Canvas or WebGL rendering.
PixiJS and Three.js power these GPU-accelerated effects for smooth performance.
3D Text Animations
Depth, rotation on multiple axes, and perspective transforms add dimensional movement to flat typography.
CSS perspective handles simple 3D; Three.js or Babylon.js tackle complex WebGL-based scenes.
Scroll-Triggered Text Animations
Animations activate when text enters the viewport, using IntersectionObserver or libraries like ScrollMagic and AOS.
Perfect for landing pages where content reveals progressively as visitors scroll down.
JavaScript Text Animation Examples
These 10 effects cover the most requested text animation patterns, from simple typewriter reveals to complex particle systems.
Each includes working code you can adapt for your projects.
Typewriter Effect with Cursor
The classic letter-by-letter reveal with a blinking caret, built using setTimeout recursion and CSS border animation for the cursor.
Code Implementation
“ const text = "Hello World"; let i = 0; function type() { if (i < text.length) { document.getElementById("output").innerHTML += text.charAt(i); i++; setTimeout(type, 100); } } type(); `
When to Use This Effect
Hero sections, call-to-action headlines, chatbot interfaces, and terminal-style designs.
GSAP Text Stagger Animation
GSAP’s stagger property animates each character with precise timing offsets, creating fluid wave-like motion across text.
Code Implementation
` gsap.from(".char", { opacity: 0, y: 50, duration: 0.8, stagger: 0.05, ease: "back.out" }); `
When to Use This Effect
Page load animations, section headers, and anywhere you need polished, professional text reveals with minimal code.
Anime.js Character Animation
Anime.js provides lightweight timeline control for staggered character animations with built-in easing functions and loop support.
Code Implementation
` anime.timeline() .add({ targets: '.letter', translateY: [-100, 0], opacity: [0, 1], easing: "easeOutExpo", duration: 1200, delay: anime.stagger(100) }); `
When to Use This Effect
Interactive headlines, micro-interactions, and sites needing a smaller library footprint than GSAP.
Text Scramble Effect
Random characters cycle through before resolving to final text, using requestAnimationFrame for smooth 60fps transitions.
Code Implementation
` class TextScramble { constructor(el) { this.el = el; this.chars = '!<>-_\/[]{}=+^?#'; } setText(newText) { let frame = 0; const update = () => { let output = ''; for (let i = 0; i < newText.length; i++) { output += frame > i 2 ? newText[i] : this.chars[Math.floor(Math.random() this.chars.length)]; } this.el.innerText = output; if (frame < newText.length 2) { requestAnimationFrame(update); frame++; } }; update(); } } `
When to Use This Effect
Tech portfolios, gaming sites, cyberpunk aesthetics, and loading states where you want visual intrigue.
SVG Text Path Animation
Text follows a curved SVG path with animated offset, creating flowing motion along custom shapes.
Code Implementation
` <svg viewBox="0 0 500 200"> <path id="curve" d="M10,150 Q250,20 490,150" fill="transparent"/> <text> <textPath href="#curve">Curved animated text</textPath> </text> </svg>
gsap.to(“textPath”, { attr: { startOffset: “100%” }, duration: 5, ease: “none”, repeat: -1 }); `
When to Use This Effect
Creative agency sites, artistic portfolios, and above the fold sections needing unique visual impact.
Split Text Reveal with CSS
Splitting.js divides text into spans; CSS keyframes handle the reveal animation with staggered delays via custom properties.
Code Implementation
` Splitting();
/ CSS / .char { opacity: 0; transform: translateY(20px); animation: reveal 0.5s forwards; animation-delay: calc(var(–char-index) 0.03s); } @keyframes reveal { to { opacity: 1; transform: translateY(0); } } `
When to Use This Effect
Performance-critical animations where CSS handles the heavy lifting and JavaScript only sets up the markup.
Canvas Particle Text Effect
Text renders to canvas, pixel data extracts letter positions, particles animate from or toward those coordinates.
Code Implementation
` ctx.fillText("PARTICLES", canvas.width/2, canvas.height/2); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const particles = [];
for (let y = 0; y < canvas.height; y += 4) { for (let x = 0; x < canvas.width; x += 4) { if (imageData.data[(y canvas.width + x) 4 + 3] > 128) { particles.push({ x, y, baseX: x, baseY: y }); } } } `
When to Use This Effect
Interactive hero sections, experimental designs, and sites targeting desktop users with GPU power.
Scroll-Triggered Text Animation
IntersectionObserver detects when text enters the viewport, triggering CSS classes or JavaScript animation sequences.
Code Implementation
` const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate'); } }); }, { threshold: 0.5 });
document.querySelectorAll(‘.animate-text’).forEach(el => { observer.observe(el); }); `
When to Use This Effect
Long-form content, scroll-based storytelling, and progressive reveals that reward scrolling behavior.
Text Glitch Effect
Layered pseudo-elements with clip-path slicing and color channel separation create digital distortion aesthetics.
When to Use This Effect
Error pages, edgy brand identities, music sites, and anywhere conventional typography feels too safe. Try our animated glitch text generator for quick implementation.
Variable Font Animation
CSS font-variation-settings animate weight, width, and custom axes; JavaScript controls timing and interaction triggers.
Code Implementation
` gsap.to(".variable-text", { fontVariationSettings: "'wght' 900, 'wdth' 150", duration: 1, ease: "power2.inOut" }); `
When to Use This Effect
Responsive typography systems, hover states, and modern sites using variable fonts like Inter or Roboto Flex.
JavaScript Animation Libraries for Text
Choosing the right library depends on project size, performance requirements, and animation complexity.
GSAP (GreenSock Animation Platform)
Industry standard for complex timelines; 60KB minified, handles SVG, CSS, and canvas with ScrollTrigger plugin for scroll animations.
Anime.js
Lightweight at 17KB, clean API syntax, built-in stagger and timeline features, MIT licensed for commercial use.
Velocity.js
jQuery-like syntax without jQuery dependency; optimized for UI animations with automatic hardware acceleration.
Mo.js
Motion graphics focus with shape morphing, burst effects, and custom path animations beyond typical text use cases.
Splitting.js
Not an animation library but essential for text splitting; pairs with CSS or any JavaScript animation library.
How to Choose a Text Animation for Your Website
Match animation style to brand identity, audience expectations, and technical constraints.
A law firm needs subtle fades. A gaming studio can go wild with particles.
Performance Considerations
Target 60fps by animating only transform and opacity; avoid layout-triggering properties like width or margin.
Test on mid-range mobile devices, not just your development machine.
Accessibility Requirements
Respect prefers-reduced-motion media queries by providing static alternatives for users with vestibular disorders.
Screen readers ignore visual animations, so ensure text content loads immediately in the DOM. Follow web accessibility guidelines.
Mobile Device Optimization
Reduce particle counts, simplify easing calculations, and consider disabling complex effects on touch devices entirely.
Battery drain matters. Test animation impact on device temperature during extended sessions.
How to Create a JavaScript Text Animation Step by Step
Build a complete staggered reveal animation from scratch using vanilla JavaScript and CSS.
Setting Up the HTML Structure
` <h1 class="animate-title" data-splitting>Animated Headline</h1> `
Wrap target text in a container with a class for JavaScript selection and optional data attributes.
Adding CSS Base Styles
` .animate-title .char { display: inline-block; opacity: 0; transform: translateY(30px); transition: all 0.4s ease; } .animate-title.active .char { opacity: 1; transform: translateY(0); } `
Set initial hidden state and define the animated end state triggered by class addition.
Writing the JavaScript Animation Logic
` function splitText(element) { const text = element.textContent; element.innerHTML = text.split('').map((char, i) => <span class=”char” style=”transition-delay: ${i 0.03}s”>${char === ‘ ‘ ? ‘ ‘ : char} ).join(''); }
const title = document.querySelector(‘.animate-title’); splitText(title); setTimeout(() => title.classList.add(‘active’), 100); `
Adding Easing and Timing Controls
Adjust transition-delay multiplier for faster or slower staggers; use cubic-bezier() for custom easing curves.
Add animation-fill-mode: forwards when using keyframes to maintain end state.
Testing Across Browsers
Verify cross-browser compatibility in Chrome, Firefox, Safari, and Edge; test both Chromium and WebKit rendering engines.
Use Chrome DevTools Performance panel to identify frame drops and optimize bottlenecks.
FAQ on Javascript Text Animation Examples
What is the best JavaScript library for text animation?
GSAP leads for complex timeline animations with its ScrollTrigger plugin and robust easing functions. Anime.js works better for lighter projects at 17KB. Splitting.js handles text splitting before animation.
How do I create a typewriter effect in JavaScript?
Use setTimeout or setInterval to append characters one by one to a container element. Add a blinking cursor with CSS border animation. Typed.js provides this effect pre-built with backspace and loop features.
Can I animate text without JavaScript?
Yes. Pure CSS animation handles fades, slides, and transforms using keyframes. JavaScript adds interaction triggers, scroll detection, and character-level control that CSS alone cannot achieve.
Why is my text animation lagging?
Animating properties like width, height, or margin triggers layout recalculation. Stick to transform and opacity for GPU-accelerated, 60fps performance. Reduce particle counts on mobile devices.
How do I trigger text animation on scroll?
IntersectionObserver detects when elements enter the viewport natively. Libraries like AOS, ScrollMagic, and GSAP ScrollTrigger simplify implementation with declarative options for thresholds and animation timing.
What is text splitting in animation?
Text splitting wraps each character, word, or line in individual span elements. This enables staggered animations where each piece moves independently. Splitting.js automates this process with data attributes for CSS targeting.
How do I make text animation accessible?
Respect the prefers-reduced-motion media query by providing static alternatives. Ensure text loads in the DOM immediately for screen readers. Avoid seizure-triggering flash rates above 3Hz.
Can I animate text along a path?
Yes. SVG text elements follow paths using textPath with animated startOffset. GSAP's MotionPathPlugin also moves HTML elements along custom SVG curves smoothly.
What is kinetic typography?
Kinetic typography combines motion design with text, making letters move, scale, rotate, and transform in choreographed sequences. Music videos, title sequences, and interactive elements commonly use this technique.
How do I optimize text animation for mobile?
Reduce animation complexity, lower particle counts, and disable GPU-heavy effects on touch devices. Test on actual hardware, not simulators. Consider disabling scroll-triggered animations that drain battery life quickly.
Conclusion
These JavaScript text animation examples give you a starting point for every common use case, from simple typewriter reveals to complex canvas particle effects.
The code snippets work. Copy them, tweak the timing values, and ship.
Remember that animation serves user interface goals, not the other way around. A subtle fade beats a flashy distortion when readability matters.
Test everything on real devices. What runs smooth on your MacBook might stutter on a budget Android phone.
Respect prefers-reduced-motion` for inclusive design. Some visitors need static text.
Start with one effect. Master its timing and easing. Then layer complexity as your project demands.
Your headlines don’t have to sit still anymore.
