WOW Javascript library

This module integrates the wow.js library into Drupal. WOW is a Javascript library which works nicely with the Animate CSS library to create great cross browser CSS3-based animations in your Drupal sites.

The Animate CSS library provides a complete set of CSS3 animations you can apply to any HTML element in your Drupal site using some JQuery code or providing some CSS classes on your templates for the HTML elements you want to animate. You can see this animations in action in the Animate CSS library's webpage.

The wow.js library provides more control over those animations, letting you to set how many times an animation will be repeated, how much time the animation will last, how much time the animation will delay until it will start, etc.

The wow.js library provides another nice feature: if you use the Animate CSS library only and you set an animation for an HTML element which is outside the fold, when you scroll down the page to see that HTML element, the CSS animation will probably have finished. Using the wow.js library with the Animate CSS library, the CSS animations of the HTML elements will start when those elements become visible as you scroll down the page. You can see a demo in the wow.js librarys's home page.

Dependencies

Installation & Configuration

  1. Download WOW Javascript library from this link.
  2. Extract the library from the .zip file and rename the extracted folder to "wow".
  3. Copy the "wow" folder to the "sites/all/libraries" folder of your site.
  4. Check the "wow.min.js" file is located at "sites/all/libraries/wow/dist/wow.min.js".
  5. Install this module.
  6. Go to "Reports > Status Report" in the administration interface of your Drupal site. If the wow.js library is not correctly installed, you'll see an error. Otherwise you'll see a message telling you which version of the WOW Javascript library is installed.

This module provides a drush command which executes steps 1 to 4. So, if you use drush, you can install this module and the required wow.js library this way:

  1. Install this module.
  2. From the command line, clean drush's cache with this command: drush cc drush
  3. Execute the wowjs command: drush wowjs
  4. Go to "Reports > Status Report" in the administration interface of your Drupal site. If the wow.js library is not correctly installed, you'll see an error. Otherwise you'll see a message telling you which version of the WOW Javascript library is installed.

One final step: go to "Configuration > Development > Performance" on your Drupal website's administration interface and clear all Drupal's caches.

By default, this module will load the wow.js library on every page of your website. If you only want to load the wow.js library in certain pages, go to your theme's configuration settings page and provide the list of pages where you want the wow.js library to be loaded (or not loaded). This module integrates with Drupal's core PHP filter module, so you can load the wow.js library on those pages where certain PHP expression returns true.

This module doesn't initialize the WOW object provided by the WOW Javascript library because that initialization is dependent on each project. You should initialize the WOW Javascript object as you need to get the WOW Javascript library working. Look at the WOW Javascript library's documentation to learn how to do that.

You can also use the BlockAnimate module to animate the blocks in your site.

Resources

Recommended Modules

Use BlockAnimate module to leverage Animate CSS and WOW Javascript libraries to add CSS3 cross-browser animations to your Drupal website's blocks.

Supporting organizations: 
Scheduling time to create this module.

Project Information

Downloads