Animations

By default animation will play as soon as the paths are created with a default duration of 2000ms. To change the duration, change the property duration with a valid number.

Animation will be queued if there are multiple blocks of text. If queuing is not required for any block of text, simply apply the property queued:false to that text.

If you don’t want the animation to start automatically, set autoAnimation:false . To start the animation manually call the draw(id) method inside ready(). id , if not provided is the index of the text block.

In order to set delay between animations, set delay to a valid number.

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

var vara = new Vara("#vara-container","SatisfySL.json",[{
    text:"Hello World!!",
    duration:3000
},{
    text:"I am Queued",
},{
    text:"I am not Queued",
    queued:false
},{
    text:"I have a delay.",
    delay:2000
}],{
    fontSize:46,
    strokeWidth:2
});