WOW doesn't work with "One Page Scroll" plugin about wow HOT 21 CLOSED

Can setup an example online so we can investigate the issue. Thanks.

from wow.

You can view it on my home page: https://sylouuu.github.io/

In the 2nd section "desoSlide", I added:

<p class="wow fadeIn">
    WOW
</p>

WOW is called in ready.js file. Animate.css is loaded. Actually WOW works well on the first section (take a look). But when you scroll, the element is still hidden.

from wow.

There's nothing we can do. Look at jquery.onpage-scroll.js:

        $(document).bind('mousewheel DOMMouseScroll', function(event) {
          event.preventDefault();

It registers its own scroll handler and calls preventDefault() to stop the event propagation. Our scroll handler is not even called.

@sylouuu please try calling new WOW().init() before calling $('#main').onpage_scroll(…) in your ready.js, that might fix the problem.

from wow.

Tried:

$(function() {
    new WOW().init();

    $('#main').onepage_scroll();
});

new WOW().init();

$(function() {
    $('#main').onepage_scroll();
});

Still the same behavior...

from wow.

Does this work maybe?

$(function() {
    $('#main').onepage_scroll();
    new WOW().init();
});

What I'm trying to achieve is to have our event handler called before the one from onpage_scroll…

from wow.

What you are suggesting was my first non-working version.

You could easily clone my repo and try on the fly: https://github.com/sylouuu/sylouuu.github.io

Bests

from wow.

Oh, sorry, I thought the first version did not wrap them in a $(). I see now that they did.

In that case, I don't really know what you could do. Except somehow patch onpage_scroll to stop it from clearing our event handler (which I still think is the original problem here, though I could be wrong).

from wow.

As you can see here, just created an issue on his repo. I dunno if I will get an anwser when I can see all open issues.

from wow.

FYI scroll is not the best reliable event to listen, especially on some mobile browser (eg safari/ios). Maybe using requestAnimationFrame() can give better result.

from wow.

I don't think you can get any better results with requestAnimationFrame. For once, you would be running code before every possible repaint event, which is not what you want to do, especially on mobile. Also, it doesn't solve the problem of detecting whether there was a scroll event in the first place.

Something like touchstart or touchmove would work. mousewheel is also not bad for non-mobile.

from wow.

I am also going through the same problem and have been stuck since few days. I would be grateful if someone could find with a solution.

from wow.

For mobile (do I mean touch screen ?), setTimeout should be considered
Checkout this thread for more informations about workaround to fix that issue Prinzhorn/skrollr#140 (comment)
Also check scrollr method https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L143-L162 they have a nice result on touch screen.

from wow.

I may be a bit late to this thread, nevertheless, the best way around this is to set autoScrolling to false, your animations should now work. However I have run into an issue whereby the page overflows by 200% to the right, and when you inspect the element it resets the overflow. Your elements aren't actually affected but you still have a horizontal scroll issue. If that makes any sense.

from wow.

Found a fix, in jquery.fullpage.css change:

html, body {
   margin: 0;
    padding: 0; 
    overflow:hidden; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

to this:

html, body {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

and change line 82 in jquery.fullPage.js from

else{
    $('html, body').css({
    'overflow' : 'auto',
    'height' : 'auto'
});

to

else{
    $('html, body').css({
    'overflow-x' : 'hidden',
    'overflow-y' : 'auto',
    'height' : 'auto'
});

It should fix the overflow issue.

from wow.

I'm still having problems using wow and one page scroll. Any fix for it?

from wow.

@NatemcM Does not work.

from wow.

It will work in fullPage.js if you use it with the option scrollBar:true or if you use autoScrolling:false.

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.

from wow.

devsite.bardstownbourbon.com causing issues on older versions of safari. Any fixes?

from wow.

My issue is -- on my first scroll it shows but than on the second puts visibility: hidden... How to fix this?

from wow.

My fix for WOW with One Page Scroll

wow = new WOW(
	{
		boxClass:     'wow',      // animated element css class (default is wow)
		..........
	}
)
wow.init();

$(".content").onepage_scroll({
	sectionContainer: ...
.....
	//!!!! FIX for broken WOW !!!!
	beforeMove: function(index) {
		var $section = $(".content [data-index='" + index + "']");
		$(".wow").each(function(){
			$(this).removeClass(wow.config.animateClass);
			if ( $section.has(this).length )
				wow.show(this);
               });
	},
});

from wow.

Any update on this?
I try code from @mahotilo but doesn't seem t work anymore

from wow.