Fullpage.js: Not working with wow.js

[darky02]

Hello!
I'm trying to make fullpage work with wow.js (plugin that allows the launching of an animation only when the element is in view).

But, so far, I failed (also, my javascript knowledge is close to none).

One thing interesting is that, when i'm on the right section, if i resize, even a tiny little bit, my browser's window, then, the animation fires.

So i figure something can be done with the callback function, like actualising the window position or something,
but, as i said, i have no clue of the js functions that i could use.

Any idea would be great! :)
(this plugin is awesome by the way)

[alvarotrigo]

Are you using autoScrolling:false or scrollBar:true ? Because if not, you should better make use of onLeave or afterLoad to fire the animations.

[darky02]

Thanks for your quick answer!

you're right,
i finally simply used addClass, but, one thing i don't quite get is that it works with the menu, but not when scrolling.
I used this:

afterLoad: function(anchorLink, index){
          $('.toanimate').addClass('animated fadeInLeftBig');
          },

[shadat501]

Hi,
I Want to use your fullpage.js but if i use afterLoad or onLeave function it's good but i can not use wow js data-duration function.
Please help me.

[alvarotrigo]

@shadat501 as said in fullPage.js FAQ:

Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

[shadat501]

Thanks for your quick and friendly answer.

[alvarotrigo]

fullpage.js provides now the option scrollBar:true.
This way wow should work while we can maintain the auto scrolling of the site.

[mattyfew]

^^^^awesome thank you

[joeyaza]

I still cant get them working together, do I have to add anything else to my jq function other than....

        $(document).ready(function() {
                $('#fullpage').fullpage({
                    scrollBar: true,
            });
        });

feel like im missing something, as firing the wow animations on the first section but onwards it isnt? (ie happening before I can scroll down..)

[alvarotrigo]

If you are using scrollBar:true then the problem you have is with wow.js and not with fullpage.js

[joeyaza]

thanks for the quick response :)

theres nothing other than adding wow to my classes to do though right ?
is

$(document).ready(function() {
    $('#fullpage').fullpage({
        scrollBar: true,
     });
});

syntactically correct ?

[alvarotrigo]

Also, make sure you initialise wow in the afterRender callback as detailed in the fullpage.js FAQs

$(document).ready(function() {
    $('#fullpage').fullpage({
        scrollBar: true,
        afterRender: function(){
              new WOW().init();
        }
    });
});

[joeyaza]

now it doesnt scroll at all :( :( :( :( this is so sad and its friday night

[alvarotrigo]

Unless you provide a reproduction in jsfiddle or codepen there's nothing we can do to help you.

[joeyaza]

https://jsfiddle.net/54rsmgpy/

is this of any help? for some reason its not bringing in the libraries/ frameworks though?

[alvarotrigo]

for some reason its not bringing in the libraries/ frameworks though?

Then not helpful at all.

Add them on the external sources option on the left bar. AND remove any CSS external to fullpage.js.
I do not want to see your site, I want to see a reproduction of the issue. Make it easy for me to help you.

[joeyaza]

okay will do that in a second sorry not used jsfiddle before :(

[joeyaza]

https://jsfiddle.net/54rsmgpy/1/

is this slightly more helpful?

[alvarotrigo]

is this slightly more helpful?

Just slightly. Where is wow.js I dont see you are importing it anywhere.
How can I reproduce the problem you are having? Details it step by step.

[alvarotrigo]

Also, I didn't say use it in afterLoad, I said afterRender.

[joeyaza]

At the moment the wow.js isnt showing up even though I have used the cdn.

anyway so the issue is if I have

$(document).ready(function() {
        $('#fullpage').fullpage({
            scrollBar: true,
            }
        });
        new WOW().init();
    });

the wow animations work on the first section, as I then scroll to the second the animations do not show (as I guess they have already happened)..

if i use ..

$(document).ready(function() {
        $('#fullpage').fullpage({
            scrollBar: true,
            afterRender: function(){
             new WOW().init();
            }
        });
    });

I cannot scroll down from the 1st section .. so it is just stuck on the first fullpage.js page..

[alvarotrigo]

At the moment the wow.js isnt showing up even though I have used the cdn.

You haven't include it in the external resources in jsfiddle.
I'll wait for your reproduction to help you.

[joeyaza]

https://jsfiddle.net/54rsmgpy/3/

wow.js is in there on the left isnt it ?

[alvarotrigo]

wow.js is in there on the left isnt it ?

Now it is, but it wasn't on the previous link you posted.

Now the second part:

How can I reproduce the problem you are having? Details it step by step.

[joeyaza]

At the moment the wow.js isnt showing up even though I have used the cdn.

anyway so the issue is if I have

$(document).ready(function() {
        $('#fullpage').fullpage({
            scrollBar: true,
            }
        });
        new WOW().init();
    });

the wow animations work on the first section, as I then scroll to the second the animations do not show (as I guess they have already happened)..

if i use ..

$(document).ready(function() {
        $('#fullpage').fullpage({
            scrollBar: true,
            afterRender: function(){
             new WOW().init();
            }
        });
    });

I cannot scroll down from the 1st section .. so it is just stuck on the first fullpage.js page..

[joeyaza]

maybe that is not too helpful as its not showing on the jsfiddle

[alvarotrigo]

Sorry can't help you without a reproduction in jsfiddle or codepen.

[joeyaza]

okay will give it a try in codepen

[joeyaza]

thanks sorry this is taking ages

[joeyaza]

just to confirm I fixed with afterRender, was just a silly syntax error in jquery, sorry about that :D

[faliqaiman]

@joeyaza can you share the reproduction code here? thanks..

[kkorushkin]

$(document).ready(function() {
$('#fullpage').fullpage({
scrollBar: true,
});
})

and then simply: body {overflow: hidden!important;}

[kkorushkin]

that solution working for me