According to the wow.js documentation I can set the bottom offset at which the animation will trigger:

  wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       0,          // < --------------- This one
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();

I have a .foo container <div class="foo wow fadeIn"></div> I want to animate when its bottom hits the bottom of the viewport i.e. it is fully on my screen. So I guess the offset should be equal to the .foo element height. Is there any way to specify this in the wow.js settings above?

According to the wow.js documentation I can set the bottom offset at which the animation will trigger:

  wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       0,          // < --------------- This one
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();

I have a .foo container <div class="foo wow fadeIn"></div> I want to animate when its bottom hits the bottom of the viewport i.e. it is fully on my screen. So I guess the offset should be equal to the .foo element height. Is there any way to specify this in the wow.js settings above?

• javascript
• jquery-animate
• wow.js

1 Answer 1

Since the bottom offset can be defined with a data-wow-offset attrubute I came up with this solution:

$(".wow").each(function() {
  var wowHeight = $(this).height();
  $(this).attr("data-wow-offset", wowHeight);
});

Hope this will help somebody. Also I'd be glad to know of a more elegant solution.