How to stop WOW JS + CSS animate on smaller devices?

javascript jquery responsive-design wow.js
ZAD picture ZAD · Feb 20, 2015 · Viewed 16.3k times · Source

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

Answer

Samuel picture Samuel · Feb 16, 2016

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

Related questions

Height equal to dynamic width (CSS fluid layout)

Is it possible to set same height as width (ratio 1:1)? Example +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width }

Read More
jQuery: How to detect window width on the fly?

I have a scrolling element on my page (with the jScrollPane jQuery plugin). What I want to accomplish is a way to turn off the scrolling window by detecting the width of the browser window. I am doing a responsive …

Read More
Touch device, Single and Double Tap Events handler jQuery/Javascript?

Background: My site is in magento open source ecommerce solution, and in the top (header) it has a shopping cart icon. On dekstop, when user hovers mouse over that icon, it shows the content (items) in shopping cart. But on …

Read More