Footwork-animate NPM

footwork-animate

Just-add-water CSS animation (for FootworkJS)

This is a CSS library/toolset used to animate elements into and out of view. Elements are animated into and out of the browser by using a parent flag which triggers a CSS animation on its nested children.

NOTE: This library can be used independently of, but was developed for use with FootworkJS when animating its elements.
NOTE: Based on/heavily customized version of animate.css.

Installation

To install via Bower, simply do the following:

$ bower install footwork-animate --save

or you can install via npm:

$ npm install footwork-animate --save

Basic Usage

Include the stylesheet on your document's <head>

<head>
  <link rel="stylesheet" href="/bower_components/footwork-animate/animate.min.css">
</head>

You need to add one of the following classes to the elements (direct children of the parent) you want to animate:

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rollIn
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
slideInDown
slideInLeft
slideInRight
slideInUp

Finally, add the class animateIn to the parent element of the elements you want to animate into view.

Full example:

<div class="contents">
  <!-- Any element with one of the above animations is invisible until
      its parent has the animateIn class added. -->
  <h1 class="fadeInUp">Example fadeInUp</h1>
  <h1 class="flipInX">Example flipInX</h1>
</div>

/**

All of the direct children of the parent will then have their
animations triggered when the animateIn class is added to the parent. */ $('.contents').addClass('animateIn');
// removing the animateIn class will cause the element to reset to original starting, invisible state $('.contents').removeClass('animateIn');

Custom Builds

footwork-animate is offered in both SCSS and plain (compiled) CSS form. You can either include the supplied SCSS and customize your build that way or you can clone the repo, modify the source, and rebuild as described below:

Clone the repo from GitHub:

git clone https://github.com/footworkjs/footwork-animate.git
cd footwork-animate

Install Node.js and NPM (if needed):
This is platform specific. Your OS may already include it, however if not please see: Installing Node.
Install gulp globally (if needed):
```
sudo npm install -g gulp-cli
```
Next, run gulp from the footwork-animate folder to compile your custom builds.
```
gulp
```
If you want only some of the “fading entrances”, simply edit the animate-config.json file to select only the animations you want to use.
```
"fading_entrances": {
  "fadeIn": true,
  "fadeInDown": false,
  "fadeInLeft": true,
  "fadeInLeftBig": true,
  "fadeInRight": false,
  "fadeInRightBig": true,
  "fadeInUp": false,
  "fadeInUpBig": true
}
```

Available SASS Variables/Defaults

If you are making your own custom build using the SCSS, you have these available variables you can override:

// The class added to the parent which triggers the animation on its children
$animateInClass: 'animateIn';

// The duration of the animations
$animateInDuration: 0.6s;

// For animations that 'slide' elements, this is the 'normal' distance
$normalDistance: 100px;

// For animations that 'slide' elements, this is the 'big' distance
$bigDistance: 200px;

@import "/path/to/footwork-animate/animate.scss";