20+Text Animation Examples using CSS & Javascript

CSS Text Animation – Are you looking for CSS Text Animation, If yes then in this post I am going to share hand-picked CSS Text Animation for you. Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or typography. With CSS, you can use clipping and add animation to text to spice things up a little. You can use these CSS Text Animation in your next web based projects.

js-css-text-animation

CSS Text Animation

Following are the list of CSS Text Animation.

Text animation

Text animation by Yoann HELIN

See the Pen Text animation by yoannhel (@yoannhel) on CodePen.



CSS3 Text Animation Effect

See the Pen CSS3 Text Animation Effect by Sonick (@Sonick) on CodePen.


Shattering Text Animation

GSAP text animation. SVG path shattering. Slow motion on hover.

See the Pen Shattering Text Animation by ARS (@ARS) on CodePen.



Simple CSS text animation

See the Pen Simple CSS text animation by yemon (@yemon) on CodePen.


Title Text Animation

Title Text Animation with GSAP, TimelineMax

See the Pen Title Text Animation by RobinTreur (@RobinTreur) on CodePen.


Text Animation: Montserrat

Text animation inspired by Web Designer issue 241

See the Pen Text Animation: Montserrat by ClaireLarsen (@ClaireLarsen) on CodePen.



#webdev series – Colorful text animation #updated

Colorful text animation Fluid and configurable colorful text animation module made with scss. Use it wherever you want but please give credit 😉

See the Pen #webdev series – Colorful text animation #updated by hendrysadrak (@hendrysadrak) on CodePen.


Transmission: Glowing Text Animation

A little glowing text animation. First, some js to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.

See the Pen Transmission: Glowing Text Animation by StephenScaff (@StephenScaff) on CodePen.



Pure CSS Text animation

Text animation with pure css using @keyframes rules

See the Pen Pure CSS Text animation by kh-mamun (@kh-mamun) on CodePen.


THREE Text Animation #1

First in a series of experiments with THREE.js and type.

See the Pen THREE Text Animation #1 by zadvorsky (@zadvorsky) on CodePen.


Text Animation with background

See the Pen Text Animation with background by yemon (@yemon) on CodePen.


Netflix style text animation with CSS

Netflix style text animation with CSS and a SCSS function to have the long text shadow

See the Pen Netflix style text animation with CSS by yemon (@yemon) on CodePen.


SVG Text Animation Using Stroke Offset Method

Loved the text animation at Wokine.com so I tried to recreate it here. I noticed they used simple shapes to create the words. I did that using svg lines and circles, and animated the stroke-offset attribute of each one to give it this animation. Animated it using css keyframes and animations.

See the Pen SVG Text Animation Using Stroke Offset Method by Ayachem (@Ayachem) on CodePen.



Text animation path[Debbie Harry]

Debbie Harry drinking some sweet words :::::::: demo for the http://blog.legomushroom.com/2014/04/text-animation-path/ blog post

See the Pen Text animation path[Debbie Harry] by sol0mka (@sol0mka) on CodePen.


Text Animation

Text animation by Siamon Hasan (http://siamonh.com)

See the Pen Text Animation by siamon123 (@siamon123) on CodePen.



Text Animation

Text animation using anime.js

See the Pen Text Animation by abhishek (@abhishek) on CodePen.


Codedoodl.es text animation

Inspiration from codedoodl.es text animation

See the Pen Codedoodl.es text animation by guillaumerxl (@guillaumerxl) on CodePen.


Text Animation (SVG)

Text animation using JavaScript, SVG, DOM. https://github.com/rafaelkendy/text-animation-svg GUI: – Color of particles.

See the Pen Text Animation (SVG) by rafaelkendy (@rafaelkendy) on CodePen.



CSS filter text animation

Experiment with css filters and text animation

See the Pen CSS filter text animation by elwinvdhazel (@elwinvdhazel) on CodePen.


Text animation path[Cree Indian Prophecy]

Try to scroll :::::::: Cree Indian Prophecy :::::::: demo for the http://blog.legomushroom.com/2014/04/text-animation-path/ blog post

See the Pen Text animation path[Cree Indian Prophecy] by sol0mka (@sol0mka) on CodePen.



Text animation with Snap SVG

Text animation like «airport departure board» or «typing» effect using the library Snap SVG. Pure Javascript and a fancy (but useless) touch of CSS.

See the Pen Text animation with Snap SVG by alticreation (@alticreation) on CodePen.


Text Animation

This text-animation module makes it easy to animate the text of any collection of HTML elements. With this module, each character animates individually, and it is simple to customize this character animation.

See the Pen Text Animation by levisl176 (@levisl176) on CodePen.


CSS3 – SVG Text Animation

CSS3 – SVG Text Animation

See the Pen CSS3 – SVG Text Animation by hipe (@hipe) on CodePen.


GSAP Text Animation

Text effect using Greensock text from wikipedia

See the Pen GSAP Text Animation by natewiley (@natewiley) on CodePen.


I Hope you liked Hand-picked list of CSS Text Animation, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.