Wow.JS fadeOut class but keep div faded out?

Question

I'm using animate.css with wow.js to fadeOut a div on scroll, but it fades out and then comes back in. I'd like it to fade away and stay away.

I've tried adding the class "animated" and it works but then doesn't work on scrolling to the div. It just fades out once the page loads.

Here's my pen:

http://codepen.io/omarel/pen/ozRzZJ

HTML

 <div class="wrapper">
  div placeholder
 </div>
 <div class="wrapper1 wow fadeOut" data-wow-duration="2s" data-wow-delay="2s">
 test fade out
 </div>

CSS

 .wrapper {
   background-color: #fff;
   height: 200px;
 }
 .wrapper1 {
   background-color: #000;
   height: 500px;
 }

JS

   new WOW().init();

score 3 · Accepted Answer · answered Oct 28 '16 at 15:53

Specifying animation-fill-mode: forwards; on the wrapper1 div in your CSS will fix this.

The animation-fill-mode property specifies a style for the element when the animation is not playing. Specifying forwards will apply the property values for the time the animation ended.

For example:

new WOW().init();

.wrapper {
  background-color: #fff;
  height: 150px;
  padding:20px;
}
.wrapper1 {
  background-color: #000;
  height: 500px;
  animation-fill-mode: forwards;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  the black div below should fade out and stay out.
</div>
<div class="wrapper1 wow fadeOut" data-wow-duration="2s" data-wow-delay="2s">
  test fade out
</div>

Wow.JS fadeOut class but keep div faded out?

1 Answers1