draw and playAll method

The draw() and playAll() are both used to animate texts with autoAnimation:false.

draw()

The draw(id,duration) method is used to animate a single block of text.

It accepts two arguments, id – The id of the text to be animated, and duration – (optional) The duration with which the text is to be animated.

<button id="draw-button">Click to Start Animation</button>
<div id="vara-container"></div>

var vara = new Vara("#vara-container","SatisfySL.json",[{
    text:"Draw method animates a single block",
	id:"draw",
	autoAnimation:false
}],{
	fontSize:48,
	strokeWidth:2
});
vara.ready(function(){
	var drawButton = document.querySelector("#draw-button");
	drawButton.disabled = false;
	drawButton.addEventListener("click",function(){
		vara.draw("draw");
	})
})

playAll()

playAll() method is used to animate all the text blocks, obeying delay and queues.

<button id="play-button">Play Animation</button>
<div id="vara-container"></div>

var vara = new Vara("#vara-container","SatisfySL.json",[{
    text:"First Block"
},{
	text:"Second Block"
}],{
	fontSize:48,
    autoAnimation:false,
	strokeWidth:2
});
vara.ready(function(){
	var drawButton = document.querySelector("#draw-button");
	drawButton.disabled = false;
	drawButton.addEventListener("click",function(){
		vara.playAll();
	})
})

Live Demo