10

1) I've looked all over th web and just was wondering if anyone of you guys come across this problem where you wanted to stop the WOW JS animation for certain devices or/and for smaller screen sizes?!

2) Also it's quite annoying to see css the animation from time to time when navigating through out the website (ux-wise would be ideal to see it once), so I was thinking to use cookies for this purpose but didn't know how to approach it, because by the time JS file is loaded at the bottom of the page the animation has been done...?!

Please bear in mind that I also use the data attributes for delays and durations, so it's not only by removing the WOW class!

Any idea would really be appreciated :) Many thanks

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
ZAD
  • 569
  • 2
  • 7
  • 23
  • After spending a lot of time with this, I went back to square 1, here is what I have used, if anybody knows any better solutions then please let us all know :) JS solution ->>> $('.wow').removeClass('wow'); – ZAD Feb 23 '15 at 08:56

6 Answers6

19

Change the default settings

wow = new WOW(
{
boxClass:     'wow',      // default
animateClass: 'animated', // default
offset:       0,          // default
mobile:       true,       // default
live:         true        // default
}
                )
wow.init();

to

mobile:false
Samuel
  • 781
  • 5
  • 22
8

a pure css solution would be (even if !important is quite ugly...) : 

@media screen and (max-width: 800px) {
    .wow{
        animation-name: none !important;
        visibility: visible !important;
    }
}

The inline styles added by wow will still be there but overwritten by these 2 lines, they won't apply anymore.

gwenaelle georget
  • 81
  • 1
  • 1
  • i used this css it's work in chrome animation is stop. but in iphone safari browser animation steel work (animation not stop). – HARDIK SHAH Aug 09 '15 at 07:42
  • 3
    `.wow{visibility: visible !important;-webkit-animation-name: none !important;-o-animation-name: none !important;animation-name: none !important;}` this might work -- just added prefixes for animation-name. – Can Goktas Nov 05 '15 at 21:49
7

Hope this helps others too;

$('.wow').removeClass('wow');

Place this at the bottom of your page, however for those that want to remove the WOW JS animation for certain devices then this is for you;

if(isMobile || isTablet) {
    $('.wow').addClass('wow-removed').removeClass('wow');
} else {
    $('.wow-removed').addClass('wow').removeClass('wow-removed');
}

Put the logic behind isMobile and isTablet yourself, and I'm sure everybody's are able to do that.

Thanks

ZAD
  • 569
  • 2
  • 7
  • 23
3

For one-liner addicts like me:

new WOW({ mobile:false }).init();
Etienne Dupuis
  • 13,548
  • 6
  • 47
  • 58
0
.wow {
 visibility: visible !important;
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}
Blue
  • 22,608
  • 7
  • 62
  • 92
que1326
  • 2,227
  • 4
  • 41
  • 58
  • 1
    While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, as this reduces the readability of both the code and the explanations! – Blue Aug 12 '16 at 14:20
-1

This is the Right One. put the code before "wow" script

if ($(window).width() <= 991){ $(".wow").removeClass("wow"); }

Jithin PV
  • 1