Sridhar Katakam

Genesis and WordPress Tutorials

Scroll animations in WordPress using WOW.js

by 9 Comments

In the past I wrote about using 'Jack In The Box' and ScrollReveal here and here for on scroll (more like, 'when-it-comes-in-the-view') animations.

I have updated the post on ScrollReveal today. But find that animations no longer work during my tests. Therefore I gave WOW, the newer incarnation of Jack In The Box a try and find it working pretty good.

In this article I share the steps to to use WOW.js in WordPress for revealing animations when scrolling. The CSS animations are powered by Animate.CSS.

Step 1

Create a 'css' directory under your active child theme (if not present) and upload animate.min.css.

Step 2

Create a 'js' directory under your active child theme (if not present) and upload wow.min.js.

Step 3

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • looks good but after everything i saw the screen of death a white screen, your code looks confusing as i can see some codes looking the same

    Reply

  • Your timing couldn’t be better! This was exactly what i was looking for! Thanks again! I got to start recommend to others your site!

    Reply

  • Thanks for this!
    one problem though: can you explain the process of adding a custom attribute for the ‘data-wow-offset’ in a different theme other than Genesis? and the more details the better as I’m just beginning!

    Reply

  • Thanks Sridhar. I also added the customized code for it not to animate on mobile

    new WOW({mobile: false }).init();

    thought I’ll add it…just in case somebody else were also looking for it.

    Reply

  • Hi Sridhar,
    This does not work for the Infinity Pro version 1.3.2. I know that this theme comes loaded with front-page only fade. How can I make fades available for, for example, a landing page?

    Reply
    • >