Skip to content

innovato/fontanimate

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

Font Animate

Library for adding a drawing animation to Font Awesome 5 icons.

Font Animate Preview

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:

Copyright and license

Code and documentation copyright 2018 Innovato. Code released under the MIT License.

About

Library for adding a drawing animation to Font Awesome 5 icons

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published