WOW JS

The WOW JS is a module that aims to integrate WOW.js library with Drupal. Provides Animations When You Scroll, Improve site interactivity with awesome animations.

Overview

The WOW.js 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 AnimateCSS module 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 library's home page.

Dependencies

• AnimateCSS module
• WOW Javascript library

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 "libraries" folder of your site.
4. Check the "wow.min.js" file is located at "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

• Learn how to use the Animate CSS library.
• Learn how to use the WOW Javascript library.

Recommended modules

• Animate CSS
  Allows you to makes cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, blocks with cool animation effects.
• Textimate ( Text + Animate )
  Provides text animation, enhancing site interactivity with awesome effects. Effortlessly transform static text into mesmerizing animations.
• Splitting.js
  Allows you to creates elements and adds CSS Variables for split words & characters! (lines, items, grids, images, more!) to unlock amazing possibilities for style and animating text, grids, and more!.
• Vivus
  is a module that aims to integrate Vivus.js library with Drupal. Provides SVG animate, Improve site interactivity with awesome animations.
• Scene
  is a JavaScript and CSS timeline-based animation library for creating animated websites.
• Anime
  The Anime is a module that aims to integrate Anime.js library with Drupal. Provides JavaScript animation engine, Improve site interactivity with awesome animations.

Similar projects

• AOS JS
  Is a small and lightweight JavaScript library (with no dependencies) that allows you to animate elements as you scroll down, and up. If you scroll back to the top, elements will animate to their previous state and are ready to animate again if you scroll down.
• AnimateCSS On Scroll ( Animate CSS + AOS JS )
  Provides AOS options on AnimateCSS UI add animation form, allows you to Animate On Scroll using AOS.js library.

Supporting

Please let me know if a new feature is needed or is there any issue and feedback. You can announce it in the WOW JS Issues section.

Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users!