134 JavaScript Text Effects

Static text is a relic of print media. In the digital realm, typography should possess momentum and weight. This component transforms a standard headline into a kinetic event. By synchronizing rotation with advanced clipping masks, we create the illusion of text being physically “printed” or “wiped” into existence at high velocity. It is visceral, rhythmic, and designed to command attention without screaming.

Typography on the web often suffers from a lack of vitality. We treat words as static information, ignoring their potential to convey wonder. This component injects a sense of “magic” into the reading experience. By combining a kinetic gradient with a randomized particle system, we create a focal point that breathes. It is not just a highlight; it is a celebration of the message, designed to captivate the user’s peripheral vision without overwhelming the content.

This Scroll-Triggered Text Highlight effect mimics the experience of marking important passages with a highlighter pen as you read. Using GSAP ScrollTrigger, the highlights animate seamlessly from left to right exactly when the text enters the reader’s viewport. The component offers multiple visual styles (full background, half-height, or underline) and fully supports dark mode, making it an excellent addition to long-form articles, documentation, or educational content.

This Interactive Typographic Wave Footer combines generative art with functional UI design. It features a field of horizontal lines that behave like a liquid surface, reacting to the user’s cursor with a satisfying ripple effect. Hidden within the wave structure is a 3D-like topographic representation of text (“DICH”), generated by mapping pixel brightness from an off-screen canvas to the vertical position of the lines. It’s a sophisticated way to add depth and interactivity to a page footer or hero section.

This Split Staggered Reveal Card creates a dramatic, cinematic effect suitable for portfolios or featured content sections. Upon interaction, the background image recedes while two semi-transparent overlays slide in to create a high-contrast backdrop. Simultaneously, the title and description animate in with a precise staggered delay - letters for the title and words for the paragraph - powered by CSS variables.

This Cursor-Tracking Spotlight Reveal Effect creates a sophisticated “x-ray” or “flashlight” interaction. Initially, the user sees plain text. As the mouse moves, a circular mask follows the cursor, revealing a hidden image underneath and simultaneously inverting the text color to white within the circle. This technique adds depth and playfulness to portfolio links or gallery items without disrupting the layout.

A showcase of 7 kinetic typography effects powered by GSAP.

A suite of volumetric typographic experiments where depth is simulated by stacking multiple DOM layers along the Z-axis using transform-style: preserve-3d.

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.

A high-tech, cinematic profile card that responds to interaction with complex text animation, immersing the user in a sci-fi atmosphere.

On hover, letters scatter chaotically, creating a dynamic, interactive explosion of text without complex animation libraries.

A high-tech, atmospheric interface that immerses the user in a retro-futuristic environment, reminiscent of 80s arcade selection screens or cyberpunk movies.

An elegant, cinematic text reveal where each letter smoothly ’emerges’ from the mist, lending significance and visual weight to the phrase.

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.

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.

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.

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.

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.

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.

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 typography with GSAP and SplitText - when one letter is dragged, the effect elastically propagates to its neighbors, dynamically changing their font-weight and scaleY.

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.

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.

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.

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.

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.

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.

This demo showcases advanced framebuffer and shader work. The light refraction and chromatic aberration effect is achieved by rendering geometry to multiple textures.

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.

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.

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.

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.

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.

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.

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.