Hidden divs are visible using WOW.js

Question

I have some sections(divs) that are hidden on desktop and shown on mobile, but since they all have the class that triggers wowjs, it puts visibility: visible when you reach the section, therefore making the hidden divs visible on desktop as well. If there any way around this? I want all of the divs to animate, but they should stay hidden if you are not on mobile.

var wow = new WOW( {
    boxClass: 'animate'
} );

Can you add the working code or working snippet, so I can have a look into your issue? — Pratik Malvi, Oct 14 '19 at 11:00
I don't have any custom code, it's just like from the example. Initialising wowjs and putting a class on the div — CritingZ, Oct 14 '19 at 11:02
For Hidden divs which CSS you're using, Visibility: hidden or display: none? Display: none property divs will not affect by Wow JS — Pratik Malvi, Oct 14 '19 at 11:09
it's display: none, but somehow visibility: visible is overriding that. — CritingZ, Oct 14 '19 at 11:42

score 3 · Accepted Answer · answered Oct 14 '19 at 11:57

It's working fine for me, Please check below working snippet:

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

body{
  overflow-x: hidden;
}
.mobile-show{
  display: none;
}


@media all and (max-width:767px){
 .mobile-show{
  display: block;
} 
.mobile-hide{
    display: none;
}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>

<h1 class="wow fadeInLeft">
  Hello
</h1>
<h1 class="wow fadeInLeft">
  World
</h1>
<h1 class="wow fadeInLeft mobile-show">
  Hello Mobile
</h1>
<h1 class="wow fadeInLeft mobile-hide">
  Hello Desktop
</h1>


<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

Hidden divs are visible using WOW.js

1 Answers1