Wow not working when I use position absolute + top

[eloisemonteiro]

Hello, I'm having this issue on my project: I'm using wow.js + fullpage.js When I try to position an object it works fine until I set bottom or top, if I do on my desktop works fine and great but desktop and mobile it just stops working. I was wondering if you guys have any ideia what could possibly be: My wow:

        var wow = new WOW(
          {
            boxClass:     'wow',      // animated element css class (default is wow)
            animateClass: 'animated', // animation css class (default is animated)
            offset:       0,          // distance to the element when triggering the animation (default is 0)
            mobile:       true       // trigger animations on mobile devices (true is default)
          }
        );
        wow.init();

My fullpage.js

    var isPhoneDevice = "ontouchstart" in document.documentElement; 
    $(document).ready(function() {
            if(isPhoneDevice){

                     $('#fullpage').fullpage({
                        'verticalCentered': false,              
                        navigation: true,

                        sectionsColor: ['#8BCCEA', '#524f94', '#7BAABE', '#ccddff'],
                        navigationTooltips: ['Login','First', 'Second', 'Third']

                      });
            }
                else{
                         $('#fullpage').fullpage({
                            'verticalCentered': false,              
                            navigation: true,
                            scrollBar: true,
                            sectionsColor: ['#8BCCEA', '#524f94', '#7BAABE', '#ccddff'],
                            navigationTooltips: ['Login','First', 'Second', 'Third']            

                          });
                }
            });

[darknailblue]

I am having a similar problem. While using fullpage.js, the animation work on the first slide, however none of the subsequent slides. Is there a way to MANUALLY trigger WOW after it is loaded?

[darknailblue]

Okay... after playing with this for a bit, I've found a temporary work around...

In the fullpage JS you'll have to add a call back to MANUALLY trigger the animation. NOTE: This is rough but, it works for now and can even be modified to work with WOWs data attributes.

so the PART of the fullpage JS you'll have to add looks like such...

afterLoad : function (anchorLink, index){
    me = $(this);

    me.find('.wow:not(.animated)').removeAttr('style').addClass('animated');
}

[marek307]

how to modify it to work with data attributes?

[marek307]

OK, i found one solution, but its only work for data-wow-delay in ms...

        afterLoad: function(anchorLink, index){
          me = $(this);
          me.find('.wow:not(.animated)').queue(function(n) {
            var delay = $(this).data('wow-delay');
            $(this).delay(delay).queue(function(m) {
              $(this).removeAttr('style').addClass('animated');
              m();
            });
            n();
          });
        },