SVG text animation effects based on jquery

This is a very creative segmented SVG text animation effect based on Segment.js. This text animation effects through the animated SVG stroke path to create a variety of text animation effect, the effect is very good
Very good SVG text animation effects

To use this SVG text animation effect, you introduce segment.js to the page, which is used to animate SVG paths, d3-ease, to make easing animation transitions, and letters.js.
<script src= "Js/segment.min.js" ></script>
<script src= "Js/d3-ease.v0.6.js" ></script>
<script src= "Js/letters.js" ></script>

HTML structure

You can use a <div> container to wrap text that you want to animate.

<div class= "Text" >Helloweba</div>

Set up and Invoke Plug-ins

We can then get this element in JavaScript and configure the parameters to animate the text. All parameter options (except Individualdelays) can be set to the following values:
Single value: Can be received by all letters.
Arrays: The first element in an array is received by the first letter, the second is received by the second letter, and so on.
Select element
var el = Document.queryselector ('. text ');

Each option can be defined as a single or can be defined as an array
var options = {
size:200,//font size, determines the height of the text, px
Weight:5,//bold, px
Rounded:false,//end of letter rounded corner
Color: [' #f90 ', ' #5F6062 '],//font colors
Duration:1,//per-letter animated display length (seconds)
Delay: [0, 0.1],//animation delay between each letter
fade:0.5,//Fade effect of duration (seconds)
Easing:d3_ease.easeCubicInOut.ease,//Buffering animation effects
Individualdelays:false//Default False, if set to false, the animation effect will be excessively displayed from left to right, if true, the letter animation effect is synchronized display
};

var myText = new Letters (el, options);

Mytext.show ();
With the above configuration, we have defined the options for text display and animation, and the plugin generates SVG text in the container. By default, text is hidden. Animate text is displayed by using Mytext.show (). Plug-ins also provide several other methods.
Text Hide
Mytext.hide ();

Toggle Text
Mytext.toggle ();