WOW JS Not work with One page scroll

Question

i use this plugin: http://www.thepetedesign.com/demos/onepage_scroll_demo.html

Every time you change the slide, I would like to do to all elements of each section of one animations with this plugin: https://github.com/matthieua/WOW

Other times I used WOW JS and it works great but this combo WOW JS + ONEPAGE SCROLL not work..

Only the first element work, other slide not show correctly.

Someone has an idea?

Thanks

score 1 · Answer 1 · answered Jan 26 '15 at 01:09

This is because OnePage Scroll plugin does not trigger a normal browser scroll, so you have to use afterMoveevent of OnePage Scroll to trigger WOW Animations.

$(".main").onepage_scroll({
    afterMove : function(index){
        var this_slide = $(".main").eq(index);
        //you can perform a manual animation of this_slide, so check out the WOW Documentation
    }
});

score 1 · Accepted Answer · answered Jan 26 '15 at 15:43

As pointed out by @Burimi, onepage scroll doesn't actually scroll the site but instead uses the property translate3d in the plugin's container.

I would encourage you to use fullPage.js instead, which solves this issue by adding the option scrollBar:true as you can see in this example, providing as well a better user experience keeping the scroll bar.

As explained in fullPage.js FAQs:

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.

If you don't want to use the scrollBar option, you can still use callbacks such as afterLoad or onLeave as detailed in the docs.

Additionally, fullPage.js provides compatibility with old browsers such as IE>7, Opera 12... and it provides more options which can be quite helpful.

WOW JS Not work with One page scroll

2 Answers2