fontanimate

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.