Author: | oubenruing |
---|---|
Views Total: | 224 views |
Official Page: | Go to website |
Last Update: | August 28, 2023 |
License: | MIT |
Preview:

Description:
svg-text-animate.js is a JavaScript library to animate text by drawing the SVG strokes defined in an SVG font.
How to use it:
1. Download and insert the svg-text-animate.js library into the document.
<script src="/dist/svg-text-animate.min.js"></script>
2. Create a new SVGTextAnimate instance and specify the path to the SVG font.
var instance = new SVGTextAnimate("/path/to/my-font-webfont.woff");
3. Load the SVG font.
instance.setFont();
4. Create a container in which you’d like to place the text animation.
<div id="demo"></div>
5. Create the SVG stroke animation and define the text to animate.
opensans.create("CSSSCRIPT", "#demo");
6. Config the animation using the following parameters:
var instance = new SVGTextAnimate("/path/to/my-font-webfont.woff",{ // duration of animation "duration": 1000, // easing function "timing-function": "linear", // specifies the number of times an animation should be played "iteration-count": 1, // animation-fill-mode CSS property "fill-mode": 'forwards', // defines whether an animation should be played forwards, backwards or in alternate cycles "direction": "normal", // specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) "fill-mode": "forwards", // time to wait before animating text "delay": 0, // or "onebyone", "delay" "mode": "sync" });
7. Customize the strokes.
var instance = new SVGTextAnimate("/path/to/my-font-webfont.woff",{ // options here },{ stroke-width: "1px", stroke: "#000", font-size: 55 });
8. Or create the animation using the setOptions
and setStrokes
methods.
opensans.setOptions({ "duration": 500, "timing-function": "linear", "direction": "normal", "fill-mode": "forwards", "delay": 50, "mode": "sync" }).setStroke({ "stroke": "white", "stroke-width": "2px", "font-size": 23 }).create("CSSSCRIPT", "#demo");
9. Add an SVG animation from the given string and inserts it into the DOM of the selector.
opensans.add("CSSSCRIPT", "#anotherElement");
Changelog:
v1.4.0 (08/28/2020)
- add fill option
v1.3.3 (09/09/2022)
- Update dependencies and rebuild
v1.3.0 (07/20/2020)
- Update dependencies and rebuild
v1.3.0 (12/08/2019)
- Add the SVGCreator, add a tool.
v1.2.0 (11/24/2019)
- Reorganize the code;
- Support multiple ways to produce animations;
- Add ‘add’ method;