Simulate Signature Animation With Vara.js Library

Category: Animation , Javascript , Recommended , Text | July 24, 2019
Author: akzhy
Views Total: 819
Official Page: Go to website
Last Update: July 24, 2019
License: MIT

Preview:

Simulate Signature Animation With Vara.js Library

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,

    // space between characters
    letterSpacing:0
    
}]);

Changelog:

v1.2.0 (07/24/2019)

  • Fixed issues with Safari

02/12/2019

  • Fixed issues with the draw() method

You Might Be Interested In:


Leave a Reply