Best jQuery Text Effect Plugins & Tutorials with Demo

    Making Stagger Reveal Animations for Text with GSAP & Splitting.js

    Making Stagger Reveal Animations for Text with GSAP & Splitting.js

    A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js. It happens when you click on “About” (and then “Close”). This kind of show/hide animation on the typographic elements is being used in many designs lately. At Codrops we call it a “reveal” animation.

    Rough Notation : JavaScript library to Create and Animate Annotations

    Rough Notation : JavaScript library to Create and Animate Annotations

    A small JavaScript library to create and animate annotations on a web page

    Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.

    Type-this : JavaScript Animated Writer Text Effect Plugin

    Type-this : JavaScript Animated Writer Text Effect Plugin

    Type-this is a simple Vanilla JavaScript plugin that animates any message you want. No jQuery is needed.

    AutoTyper JS : JavaScript plugin for Animated Typewriting

    AutoTyper JS : JavaScript plugin for Animated Typewriting

    A vanilla javascript plugin for animated typewriting. Autotyperjs can be accessable in global variable as autoTyper. It exposes outside two functions, start and stop. Multiple instances can be created by using new keyword. Its compatible with Chrome, Firefox, Safari, Internet Explorer and Edge.

    TextyleFLIP.js : A Flip Text effect with jQuery

    TextyleFLIP.js : A Flip Text effect with jQuery

    TextyleFLIP.js is a flip text revealing effect with jQuery and tiny CSS.

    Text Trail Effect with CSS & TweenMax

    Text Trail Effect with CSS & TweenMax

    Today we’d like to share a little text effect for a slideshow with you. It’s based on the animation seen in the Dribbble shot Abstract is hiring. The idea is to show a trail of a text when transitioning between slides of a slideshow. The animations are made using TweenMax.

    Text Distortion Effects using Blotter.js

    Text Distortion Effects using Blotter.js

    Distortion effects have become quite popular over the past two years and now many extraordinary website designs have some unique form of this intriguing trend. Today we’d like to share two demos with you that show how to use Blotter, a three.js and Underscore.js powered API for drawing artsy text effects. We used it to distort text on scroll and on mouse move.

    CSSans Pro – The Colourful, Sassy, CSS Font

    CSSans Pro - The Colourful, Sassy, CSS Font

    CSSans Pro is a just-for-fun CSS project.

    Text-Slider : jQuery Text Animation Effect Plugin

    Text-Slider : jQuery Text Animation Effect Plugin

    Text-Slider is a jQuery text animation effect plugin.

    Pic to Txt : jQuery plugin to Turn Images into Editable Text

    Pic to Txt : jQuery plugin to Turn Images into Editable Text

    jQuery Optical Character Recognition (OCR) script. Convert your scanned documents and images into editable text. Very easy to use just like any other jQuery plugin.

    Features:

    • Convert pdf files and images into editable text.
    • Multi-language recognition.
    • Mathematical equations recognition.
    • Multi column text recognition.
    • Crop and OCR area selection.
    • File rotation.
    • Support for poorly scanned pages.
    • Support for low resolution images.