"jQuery Lettering Animate" is an extension of the "lettering plugin", it iterates through each letter separated by the lettering and animates it.

Here is the sintax to use it:

$("#element").lettering().animateLetters({left:200,opacity:0},{left:0,opacity:1},{randomOrder:true,time:1000},onCompleteHandler);

First you apply the lettering effect to the dom element, then, you animate the letters passing as parameters the intro or the outro animation properties of each letter ,then, you set the plugin options "randomOrder", "time" and "reset", and the "onComplete" callback.

Parameters:

randomOrder: Set if the letters will be animated in random order.

time: Set the interval time between each letter's animation.

reset: This specify if the letters will be reseted after the animation completes. It will remove all "span" tags and include simple text, this is good for accessibility and SEO optimization.

Download



Requirements:

Examples:

This is the example animating the opacity property

$("#title01").lettering().animateLetters({opacity:0},{opacity:1},{randomOrder:false,time:500,reset:true}); $("#title01").lettering().animateLetters({opacity:1},{opacity:0},{randomOrder:false,time:500,reset:true});

This is the example animating the opacity property in random order

$("#title01r").lettering().animateLetters({opacity:0},{opacity:1},{randomOrder:true,time:1000,reset:true}); $("#title01r").lettering().animateLetters({opacity:1},{opacity:0},{randomOrder:true,time:1000,reset:true});

This is the example animating the top and opacity property

$("#title02").lettering().animateLetters({top:20,opacity:0},{top:0,opacity:1},{randomOrder:false,time:500,reset:true}); $("#title02").lettering().animateLetters({top:0,opacity:1},{top:20,opacity:0},{randomOrder:false,time:500,reset:true});

This is the example animating the top and opacity property in random order

$("#title02r").lettering().animateLetters({top:20,opacity:0},{top:0,opacity:1},{randomOrder:true,time:1000,reset:true}); $("#title02r").lettering().animateLetters({top:0,opacity:1},{top:20,opacity:0},{randomOrder:true,time:1000,reset:true});

This is the example animating the left and opacity property

$("#title03").lettering().animateLetters({left:-200,opacity:0},{left:0,opacity:1},{randomOrder:false,time:500,reset:true}); $("#title03").lettering().animateLetters({left:0,opacity:1},{left:-200,opacity:0},{randomOrder:false,time:500,reset:true});

This is the example animating the left and opacity property in random order

$("#title03r").lettering().animateLetters({left:-200,opacity:0},{left:0,opacity:1},{randomOrder:true,time:1000,reset:true}); $("#title03r").lettering().animateLetters({left:0,opacity:1},{left:-200,opacity:0},{randomOrder:true,time:1000,reset:true});

This is the example animating the top, left and opacity property

$("#title04").lettering().animateLetters({top:200,left:200,opacity:0},{top:0,left:0,opacity:1},{randomOrder:false,time:500,reset:true}); $("#title04").lettering().animateLetters({top:0,left:0,opacity:1},{top:200,left:-200,opacity:0},{randomOrder:false,time:500,reset:true});

This is the example animating the top, left and opacity property in random order

$("#title04r").lettering().animateLetters({top:200,left:200,opacity:0},{top:0,left:0,opacity:1},{randomOrder:true,time:1000,reset:true}); $("#title04r").lettering().animateLetters({top:0,left:0,opacity:1},{top:200,left:-200,opacity:0},{randomOrder:true,time:1000,reset:true});