0.2.0 • Published 6 years ago
fontanimate v0.2.0
Font Animate
Library for adding a drawing animation to Font Awesome 5 icons.
Quick start
Several quick start options are available:
- Download the latest release.
- Clone the repo:
git clone https://github.com/innovato/fontanimate.git - Install with npm:
npm install fontanimate - Install with yarn:
yarn add fontanimate
Usage
Add the dependencies to your HTML:
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Add some Font Awesome Icons (note the font-animate class):
<i class="fab fa-500px font-animate"></i>
<i class="fab fa-apple font-animate"></i>Initiate Font Animate:
$(document).ready(function () {
$('.font-animate').fontAnimate();
});Done!
Options
The plugin options are divided in two parts:
- Font Animate options
- Vivus options (dependency for SVG animation)
Font Animate options
| Name | Type | Description |
|---|---|---|
stroke | string | Stroke color. E.g. red, #000, #00FF00, Default: currentColor (inherits color) |
fill | string | Fill color. E.g. red, #000, #00FF00, Default: transparent |
strokeWidth | integer | Stroke width. Default: 1 |
callback | function | Callback at the end of the animation. Default: (obj) => {} |
Vivus options
Refer to Vivus for animation specific options. All Vivus options are available for use in this library.
Example with mixed Font Animate/Vivus options
$(document).ready(function () {
$('.font-animate').fontAnimate({
stroke: 'red',
duration: 500 // Vivus specific animation option
});
});Options through HTML attributes
It is possible to override the initial options through HTML attributes:
<i data-stroke="red" data-stroke-width="5" data-fill="green" data-duration="1000" class="fab fa-apple font-animate"></i>Credits
A big thanks to:
- Vivus for the SVG animation library!
- Font Awesome for the awesome SVG icons!
Copyright and license
Code and documentation copyright 2018 Innovato. Code released under the MIT License.