Vara is a JavaScript library that can create text drawing animations. Vara 1.x will soon be replaced by v2 which uses canvas instead of SVG and may cause sudden changes.

The font used is a specially created JSON file that contains the information needed to generate the text. It is included by passing the URL of the font as the second argument. A few custom fonts are available in the Github repository, and more will be added soon.

Methods

.ready(function)

Is used to execute a function when the font is loaded and the elements are created.

Any other method should be called inside this function.

.get(id)

Returns an object with properties characters and container.

characters is an array of SVG g elements, each representing a letter, and the container is an svg g wrapping the text block. If an id was given to the text during creation, it should be given as the argument, otherwise use the index of the text block.

.draw(id)

Used to animate texts with autoAnimation:false.

If an id was given to the text during creation it should be given as the argument, otherwise use the index of the text block.

.animationEnd(function(i,o){})

Used to execute a function once animation ends, triggers every time a block of text is drawn. Has two arguments,

i – The id of the drawn text.

o – The object described in the get() method.

.playAll()

Introduced in v1.1.0

Is used to play the animation of every text block, obeying delay and queue

Must Read: Seamless HTML5 Canvas-based Signature Drawing Pad Library

How to make use of it:

1. Link to Vara.js library.

<script src="src/vara.min.js"></script>

2. Create a container in which you want to display the text graphic animation.

<div id="vara-container"></div>

3. Initialize the Vara.js library and specify the text to be written in the container.

var vara = new Vara("#vara-container","font.json",[{
    text:" "
}]);

4. Possible options to customize the text drawing animation.

var vara = new Vara("#vara-container","font.json",[{

    // text to type
    text:" ",

    // font size
    fontSize:24, 

    // strok width
    strokeWidth:.5,

    // font color
    color:"black",

    // unique ID
    id:"",

    // duration in ms
    duration:2000,

    // text alignment
    textAlign:"left",

    // offsets
    x:0,
    y:0, 

    // Whether the x or y coordinate should be from its calculated position, ie the position if x or y coordinates were not applied
    fromCurrentPosition:{ 
      x:true, // Boolean
      y:true, // Boolean
    },

    // auto play
    autoAnimation:true,

    // animate the text in a queue
    queued:true,

    // delay in ms
    delay:0,

    /* Letter spacing can be a number or an object, if number, the spacing will be applied to every character.
      If object, each letter can be assigned a different spacing as follows,
      letterSpacing: {
          a: 4,
          j: -6,
          global: -1
      }
      The global property is used to set spacing of all other characters
    */
    letterSpacing:0
    
}]);

See Demo And Download

Official Website(akzhy): Click Here

This superior jQuery/javascript plugin is developed by akzhy. For extra Advanced Usage, please go to the official website.