Reveal animations when elements are within the viewport (on load, scroll and resize). WOW.js alternative with MIT license. Based on Josh Johnson's Animate.js library.

<script src="/dist/wew.min.js"></script>
<script>
    var wew = new Wew();
    wew.init();
</script>

<script src="/dist/wew.min.js"></script>
<script>
    var wew = new Wew({
        target: '.wow',
        keyword: 'wow',
    });
    wew.init();
</script>

To install via NPM, run npm install --save-dev wew.js

Default way of targeting an element to animate. This can be overridden to be a custom attribute or class.

Delay before the animation, overide animation-delay of the element.

Duration of the animation, overide animation-duration of the element.

Override the plugin offset option per element.

Overide the plugin reverse option per element.

<div class="wew fadeIn"></div>
<div class="wew tada" data-wew-delay="1s"></div>
<div class="wew bounce" data-wew-offset="0.2" data-wew-reverse="true"></div>
<div class="wew bounce" data-wew-offset="100" data-wew-duration="5s"></div>

Type: String Default: .wew

Element/s to target. Once this element is in view, add animations.

Type: String Default: js-animated

Class to be added to element once animation has completed.

Type: String Default: animated

Class of the animation library to apply, default is for Animate.css.

Type: Number Default: 0.5 (50%)

If less then 1, percentage of element that needs to be in the viewport before the animation triggers. If more then 1, offset from the top of the element (in pixels).

Type: Boolean Default: false

Once the element has left the top of the viewport (by the same offset), remove the animations from element. When the element comes back into view, it will animate again.

Type: Boolean Default: false

Debugging information in console.

Type: Boolean Default: true

Whether to fire on DOMContentLoaded.

Type: Boolean Default: true

Whether to fire on scroll.

Type: Boolean Default: false

Whether to fire on resize.

Type: Function Default: function(){}

Function to run once Animate.js initialises

Type: Function Default: function(){}

Function to run once animation has completed (pass parameter to access the animated element).

Initialises event listeners.

Kills event listeners and resets options.

Adds/removes animations without the need for event listeners.

wew.js is supported in modern browsers from IE9 and above (i.e. browsers that support CSS animations).

To setup a local environment: clone this repo, navigate into it's directory in a terminal window and run the following command:

• npm install

• gulp dev
• gulp build

MIT License. Feel free to use it anywhere you want.