Simulate Signature Animation With Vara.js Library

Preview:

Description:

The Vara JavaScript library lets you create text drawing animation to simulate someone sign on your webpage.

How to use it:

Link to the Vara.js Library.

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

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

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

Initialize the Vara.js library and define the text to type in the container.

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

Possible options to customize the text drawing animation.

var vara = new Vara("#vara-container","font.json",[{
    // text to type
    text:"CSSSCRIPT.COM!",
    // 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
    
}]);

Changelog:

11/05/2021

• v1.4.0

02/12/2020

• Custom letter spacing

v1.2.0 (07/24/2019)

• Fixed issues with Safari

02/12/2019

• Fixed issues with the draw() method