Smoothly Animate Text Letter By Letter - jQuery Fonteo

Fonteo is a simple but customizable jQuery text animation plugin that smoothly animates given text letter by letter using your own functions.

More features:

• Autoplay and pause on hover.
• Infinite loop.
• RTL or LTR.
• Custom template.

How to use it:

1. Place the minified version of the jQuery Fonteo plugin after jqUERY.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="fonteo.js"></script>

2. Create a container in which you want to place the animated text.

<span class="fonteo"></span>

3. Initialize the plugin, specify the text to animate and customize the animation using the letterIn & letterOut functions as follows:

var opts = {
    text: 'Text To Animate...',
    direction: 'right',
    infinite: true,
    moving: true,
    pauseOnHover: true,
    speed: 10,
    letterIn: function(lr){
      lr.animate({'font-size':'30px', 'margin-left':'5px'  })
      lr.css('color','green')

      setTimeout( function(){
      lr.css('color','blue')
      lr.animate({'font-size':'20px', 'margin-left':'22px'  })
      }, 100 )

      setTimeout( function(){
      lr.animate({'font-size':'40px', 'margin-left':'0px'  })
      lr.css('color','black')
      }, 200 )
    },
    letterOut: function(lr){
      lr.animate({'font-size':'10px'},500,function(){
        $(this).fadeOut(300, function(){ $(this).remove() })
      })
    }
}

$('.fonteo').fonteo( opts )

4. You're also able to create the text animation using HTML data attributes:

<span class="fonteo"
      data-OPTION="value">
</span>

5. All default options.

// 'right' or 'left'
// data-direction
direction: 'default',

// infinite loop
// data-infinite
infinite: false,

// enable moving
// data-moving
moving: false,

// text to animate
// data-text
text: '',

// animation speed
// data-speed
speed: 100,

// pause on hover
// data-pause-on-hover
pauseOnHover: false,

// class name
// data-class-name
className: 'fonteo-letter',

// custom template
// data-tpl
tpl: "<span>{{fonteo-letter}}</span>",

// functions & callbacks
letterIn: false,
letterOut: false,
complete: false,
mouseenter: false,
mouseleave: false,  

---

This awesome jQuery plugin is developed by miso25. For more Advanced Usages, please check the demo page or visit the official website.