Comments (21)
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.
Related Issues (20)
- Cannot read property 'path' of undefined (Gatsby) HOT 1
- NPM registry outdated?
- Issue at the end of the animation on smartphone HOT 2
- Is WOW-1.1.2 are free to use for commercial purpose?
- TypeError: this is undefined
- Is it possible to to add two animation call in the single element?
- Wow effect content loaded via Ajax not working HOT 2
- Why net::ERR_ABORTED 404?
- support : how to trigger a jquery script at the end of a WOW animation HOT 1
- New version AnimateJS HOT 3
- Library simply does not work at all with jQuery 3.5.1 HOT 4
- [QUESTION] Is it possible to use HTML data attribute instead of a class `wow'?
- TypeError: target.className.replace is not a function
- no typescript version
- Cannot set property 'getPropertyValue' of undefined HOT 14
- Use inconsistencies when using inside react-modal.
- Animatiosn stopped working on Chrome
- How can I disable the mandatory presence of –webkit-?
- Waterfall test shows wow.min.js canceled
- When I use it in React,get error “Uncaught TypeError: Cannot set properties of undefined (setting 'getPropertyValue')” HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wow.