126 JavaScript Text Effects
JavaScript brings text to life with dynamic effects. This collection of JavaScript text animations includes typewriter effects, text reveal, scrambling letters, hover distortions, and scroll-triggered typography transitions - great for landing pages, headers, and storytelling.
Last updated:
Bouncy CSS Text Animation with Splitting.js
A playful typographic vignette where Splitting.js enables granular CSS control, while complex @keyframes orchestrate a physics-based liquid dot that physically interacts with specific letters via data-char attributes.
Futuristic Card Effect
A high-tech, cinematic profile card that responds to interaction with complex text animation, immersing the user in a sci-fi atmosphere.
Scrambling Letter Effect on Hover
On hover, letters scatter chaotically, creating a dynamic, interactive explosion of text without complex animation libraries.
Choose Your Megafauna
A high-tech, atmospheric interface that immerses the user in a retro-futuristic environment, reminiscent of 80s arcade selection screens or cyberpunk movies.
Text Animation
An elegant, cinematic text reveal where each letter smoothly ’emerges’ from the mist, lending significance and visual weight to the phrase.
Wave Text
The text appears as a massive, volumetric block that dynamically adjusts its height and perspective in response to mouse movement, ‘springing’ upon click to create a tactile sensation.
Grainy Gradient Text with CSS Houdini
A holographic typography effect achieved through CSS Houdini properties to animate complex gradient coordinates. The text features a grainy texture generated by SVG noise filters and blended with conic and radial gradients using background-blend-mode: color-burn, creating a shimmering, fluid color movement clipped directly to the character shapes.
GSAP Flip Plugin Demo
This demo is a showcase of GSAP’s Flip plugin, a powerful tool for animating layout changes. The Flip.getState() and Flip.from() methods are used to seamlessly transition between four different CSS layouts, creating a complex and fluid morphing animation with minimal code.
GSAP ScrollTrigger Parallax Effect
This demo is a masterclass in scroll-driven animation, where GSAP’s ScrollTrigger plugin choreographs multiple, layered effects. A fluid parallax effect is created by using scrub: 1 to tie the yPercent and rotation of decorative elements directly to the scrollbar. This is complemented by a sophisticated text reveal, where GSAP’s SplitText plugin animates characters into view with a staggered opacity and y tween, demonstrating a powerful and modular approach to building complex, interactive scrolling experiences.
Text Reveal with Splitting.js
This demo is a showcase of Splitting.js, a library that splits HTML elements into granular parts for detailed animation. The “Course Clear” heading is split into individual characters, and a grid overlay is created with data-splitting="cells", allowing for complex, staggered animations on each part.
Animated SVG Danger Text
A glitch effect for text implemented via multi-layered SVG with feGaussianBlur filters and color blending. The GSAP ticker manages the animation, providing flicker and random blinking of elements.
Glowing Blob Effect
3D Motion Graphics with Three.js
A demo showing how to create a marquee effect on a 3D cylinder using Three.js and the Threeasy wrapper library - the key feature is manipulating the texture through its repeat and rotation properties to simulate scrolling.
Interactive Jello Text with Variable Fonts
Interactive typography with GSAP and SplitText - when one letter is dragged, the effect elastically propagates to its neighbors, dynamically changing their font-weight and scaleY.
JFK Speech Text Wave Animation
Dynamic visualization of John F. Kennedy’s speech, where each word is a separate element, creating a “running wave” effect using CSS transformations and a JavaScript setInterval.
Color Clipping Effect with CSS Gradients and GSAP
A sleek text hover and intro animation, implemented using GSAP to smoothly transition CSS gradient stops via modern CSS variables, ensuring high performance and clean, maintainable code.
X-Ray Text Hover Effect with JS Masking
The effect is technically created by overlaying two text blocks (filled and outlined) with different z-index values, where a masking circle is moved via JavaScript on mousemove events to hide the bottom text layer, resulting in a crisp, performant animation.
CSS Glitchy Text Reveal with Splitting.js
A demonstration of per-character text manipulation using Splitting.js to create a striking CSS glitch animation, where each character receives a unique set of random custom properties for varied and dynamic text reveal effects.
Reveal Hidden Text Effect
A dynamic interactive grid implemented on HTML5 Canvas, where the radius of each circle is calculated in real-time based on its squared distance from the cursor, creating a smooth attraction/repulsion effect on mouse movement.
Text Reveal (on Scroll) Effect
An elegant text reveal effect that uses the Intersection Observer API for lazy-loading animation upon entering the viewport and relies on GSAP to perform a smooth “wipe” using a scale transformation.
Glass Refraction Text Effect with three.js
This demo showcases advanced framebuffer and shader work. The light refraction and chromatic aberration effect is achieved by rendering geometry to multiple textures.
GSAP Interactive Table with Hover Effects
This interactive portfolio leverages GSAP for smooth animations and a text scramble effect on hover, plus a dynamic background image that changes with a parallax effect for each project.
Untitled SVG Text Effect
A lightweight, unique SVG text effect powered by JavaScript, demonstrating the use of a dynamically generated pattern fill with individual element animations via Anime.js.
Three.js TextGeometry
This Three.js demo showcases procedural 3D text deformation combined with a sophisticated post-processing pipeline. It layers an UnrealBloomPass with custom GLSL shaders for dynamic rust and glitch effects, all tweakable in real-time via dat.GUI.
Anime.js Text Split Effect
This demo reveals the power of the new text.split API in anime.js v4, creating complex, stateful text animations with timelines and interactive controls.
Anime.js Split Text Hover Effects
This demo is a powerful showcase of the Anime.js library’s capabilities for creating complex text animations. It features various effects, from 3D rotations and explosions to wavy motions, highlighting the library’s flexibility and performance.
Text Decoder Animation
This demo shows how GSAP can be used for complex frame-by-frame text animations. It combines random character generation in JavaScript with precise timeline control to create a dynamic “encryption” effect, while CSS adds the final touches with a neon glow.
Text on Spiral Path
A great example of how to create complex visual animations without third-party libraries. The effect is built on the programmatic generation of a spiral path and animating text along it via requestAnimationFrame.
