JavaScript Text Effect Libraries for 2016

Text animations or effects in websites were so popular once Flash was used widely and now, simplistic, non-animated websites that put the content in front are the way to go.

However, if used wisely, there is still room for such animations, and JavaScript Text Effect Libraries simplify creating such animations easily.
JavaScript text effect libraries enable you to create myriad of text effects and animations like rotate, flip, underline, drop cap, shake, bounce, flash, highlight and much more.

This article includes 20 Best JavaScript Text Effect Libraries which not just make your web content animated but also turn the magic by making them beautiful and elegant.

Read Also —

20 Amazing jQuery Image Crop and Resize Plugins

12 Best jQuery Scroll to Top Plugins

15 Best jQuery Syntax Highlighter

1. Microlight.js

microlightjs
Microlight.js is a micro-library which improves readability of code snippets by highlighting, for any programming language, yet without attaching additional language packages or styles.
Demo & Download

2. Baffle.js

bafflejs
Baffle.js is a tiny JavaScript library for obfuscating and revealing text in DOM elements. This library is very lightweight only 1.8kb gzipped, dependency free and supports IE9.
Demo & Download

3. Strman

strman
strman is a JavaScript string manipulation library without npm dependences.
Demo & Download

4. Substance

substance
Substance is a JavaScript library for web-based content editing (WYSIWYG). It provides building blocks for realizing custom text editors and web-based publishing systems.
Demo & Download

5. Substituteteacher.js

substituteteacher-js
substituteteacher.js is a JavaScript library that lets you substitute sentences for each other, swapping only the words necessary.
Demo & Download

6. Type.js

typejs
Type.js adds new type properties to your CSS, giving you the control you need for type on the web. You can write these properties in your CSS and they will work like any other property.
Demo & Download

7. Underline.js

underlinejs
underline.js is a JavaScript library that sets out to do one simple job: draw and animate the most perfect and playful text underline.
Demo & Download

8. TheaterJS

theaterjs
TheaterJS is basically a JavaScript typing effect plugin. Its particularity is to mimic human behaviour.
Demo & Download

8. Dropcap.js

dropcapjs
dropcap.js makes beautiful drop caps easy for the web. This library is compatible to almost every browser on Windows (IE10+, Firefox, Chrome) and OSX (Firefox, Chrome, Safari).
Demo & Download

9. Fitter Happier Text

fitter-text
Fitter Happier Text is a JavaScript library for performant and fully fluid heading inspired by FitText. Fitter Happier Text replaces each node with an SVG text node and sets the viewBox attribute based on its width and height.
Demo & Download

10. Lining.js

liningjs
Lining.js is an easy to use JavaScript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
Demo & Download

11. Countable.js

countablejs
Countable is a JavaScript library to add live paragraph-, word- and character-counting to an HTML element. It is a zero-dependency library and comes in at just about 1KB when minified and gzipped.
Demo & Download

12. WordCount.js

wordcountjs
WordCount.js is a client-side JS library that counts bytes, words, lines chars, and calculates the longest line of a file. This library utilized the HTML5 File API.
Demo & Download

13. Shine.js

shine-js
Shine.js is a library for pretty shadows. You can set dynamic light positions, Customizable shadows and there are no library dependencies, AMD compatible. It works in browsers that support textShadow or boxShadow and auto-prefixes if necessary.
Demo & Download

14. Textillate.js

textillate-js
Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Simply include textillate.js and it’s dependencies in your project to start creating unqiue effects. Textillate.js is built on top of the simple, yet amazingly powerfulanimate.css and lettering.js libraries.
Demo & Download

15. Kerning.js

kerning-js
Kerning.js is a small single script, with no dependencies, that allows you to scale your web typography with real CSS rules automatically. Add it to your page, add some CSS rules, and your text will be instantly beautified.
Demo & Download

16. Repaintless.css

repaintlesscss
Repaintless.css in a lightweight animation library that consists only of animations that don’t cause reflows and repaints of a website when used correctly.
Demo & Download

17. Type Rendering Mix

type-rendering-mix
Type Rendering Mix is a tiny JavaScript library that allows to apply styles only when Core Text is used (iOS and OS X) in order to achieve a more consistent rendering while preserving the accuracy of sub-pixel antialiasing.
Demo & Download

18. Blast.js

blastjs
Blast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Blast’s uses include typographic animation, juxtaposition, styling, search, and analysis.
Demo & Download

19. ColorDivideJS

colordividejs
ColorDivideJS js a JavaScript library that divides every letter of the word and give different color to it.
Demo & Download

20. Clipboard.js

clipboardjs
Clipboard.js is a lightweight JavaScript library to create a modern approach to copy text to clipboard. It doesn’t require flash or any other framework.
Demo & Download

Final Words

Text effects or animation is very popular way to go with a website, a beautiful animated website not only draws user attention but also helps you to bring more traffic and user engagement. You can easily create several stunning animations and effects with the help of JavaScript libraries mentioned above.

If we have missed something and you believe it should be in the list, then please write a comment with the link to that library. We would love to add it to the list.

JavaScript Text Effect Libraries for 2016
5 (100%) 6 votes

Leave a Reply