Here the Collection of free HTML and CSS text effect code examples: background, hover, rotating, typing, etc. Update of March 2019 collection.
TEXT REVEAL ANIMATION
GSAP text reveal animation. built with HTML/Pug, CSS/SCSS and JavaScript (tweenmax.js), created by Artur Sedlukha
SVG TEXT ANIMATION
Nice SVG text animation.built with HTML, CSS and JavaScript (anime.js), created by Cassie Evans
LETTERS EFFECT
Letters effect on scroll. made with HTML, CSS and JavaScript (jquery.js) by Stefano Perelli
FUN TEXT
Click to re-draw! Mapping sprites to text is always fun. built with HTML, CSS and JavaScript (createjs.js) created by Sebastian DeRossi
TEXT LINE ANIMATION
Nice text line animation with TweenMax.js. built with HTML, CSS/LESS and JavaScript (tweenmax.js) created by John Healey
SILENT MOVIE TEXT EFFECT
Movie text effect with canvas. built with HTML, CSS and JavaScript created by Dimitra Vasilopoulou
ONION SKINNING TEXT MORPHING
Onion skinning text morphing in HTML/CSS/JS. Made by John Healey
SPLITTED TEXT REVEAL
HTML, CSS and JavaScript splitted text reveal. Made by Fabio Ottaviani
ANIMATED TEXT INPUT
Animated text with HTML, CSS and JS. Made by Bình Cao
BREAK/ANIMATE WARPING TEXT PARAGRAPH EXAMPLE
HTML, CSS and JavaScript break/animate warping text paragraph example. Made by James
BUBBLING TEXT EFFECT
A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they’re coming from behind the text, and then fade out and are removed. Made by html5andblog
GLITCHED TEXT
HTML, CSS and JavaScript glitched text. Made by Derek Palladino
TEXT COLOR DRAW
Path drawing of text using greensock’s drawSVG plugin. Made by CJ Gammon
ANIMATING SVG TEXT
HTML, CSS and SVG animating text. Made by Fabio Ottaviani
SHADED TEXT
Shaded text, a SVG + CSS3 experiment about animated shadows. It isn’t optimized for mobile devices… yet.
Made by Rafael González
SECOND SHADOW
Styling text with SVG. Made by Code School
SHADOW PARALLAX
Move your Mouse and Play words. Written by React, ES6, Babel transpiler.
Made by Siamak Mokhtari
SQUIGGLY TEXT
Squiggly text experiment with SVG filters. Made by Lucas Bebber
SHATTERING TEXT ANIMATION
GSAP text animation. SVG path shattering. Slow motion on hover. Made by Arsen Zbidniakov
GSAP TEXT ANIMATION
Text effect using Greensock. Made by Nate Wiley
COLORFUL TEXT ANIMATION
Fluid and configurable colorful text animation module made with SCSS. Made by Hendry Sadrak
ANIMATED TEXT WITH SNAP.SVG
Work with this feels like an old good Flash 🙂 Made by Yoksel
CSS TEXT STROKE
Change the text to see the animation again. Made by Ignacio Correia
CSS TEXT SHADOW
Taking a stab at a Lynda.com tutorial. CSS: Advanced Typographic Techniques using lettering.js
Made by Chris Eisenbraun
SVG PATH ANIMATED TEXT
Animated the text “Design” based on one SVG path. Click to toggle animation Made by Tamino Martinius
LINE TEXT
Animated text with HTML, CSS and JavaScript. Made by Johan Fagerbeg
3D TEXT EFFECT – MOUSEMOVE
Nice 3D Text effect with jQuery mousemove. Made by Dennis Garrn
