1

I am using wow.js to fade in some divs which are under a div with overflow auto and fixed height.

Some of the objects animate nicely but some of them would not animate or even appear (remain invisible).

I presume this is a viewport issue. The objects which does not appear within the viewport become invisible forever.

Here is my code:

<html>
<head>
<style>
.box{
    width:300px;
    margin:0 auto;
    height:500px;
    overflow:auto;
}
.smallBoxes{
    position:relative;
    width:200px;
    height:200px;
    color:#fff;
    background-color:#339;
    text-align:center;
    vertical-align:middle;
    margin:10px;
}

</style>

<script type='text/javascript' src="js/jquery-1.12.4.js"></script>
    <script type='text/javascript' src="js/wow.min.js"></script>
    <script type='text/javascript' src="js/wow.js"></script>


   <script>
 new WOW().init();
</script>
</head>

<body>
<div class="box">
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.0s">Box1</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.1s">Box2</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.2s">Box3</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.3s">Box4</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.4s">Box5</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.5s">Box6</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.6s">Box7</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.7s">Box8</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.8s">Box9</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.9s">Box10</div>
</div>
</body>
</html>

Thank you

Steven
  • 15
  • 4

1 Answers1

0

I have found the solution. Just added the code to my style.

.wow {
  visibility: visible !important;
}
Steven
  • 15
  • 4