0

I'm trying to add a class when the item comes into view

but apparently, I'm missing something that makes wow.js not working

here is what I have tried.

body{
    
    display:flex;
     justify-content:center;
}


.test {
        width: 500px;
        background-color: #000;
        height:250px;
        margin-top:auto;
        color:#ffff;
        padding-top:5%;
        text-align:center;
}
            <link rel="stylesheet"
                href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

                <body> 
                            <div class="test wow bounceInUp">
                                    Content to Reveal Here
                            </div>
                </body> 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
             <script src="js/wow.min.js"></script>
             <script>
              new WOW().init();
            </script>
MahmouD Skafi
  • 370
  • 3
  • 15

1 Answers1

0

I tried compiling your code but got no result as well.

However, after downloading animate.css and wow.min.js from the project's GitHub repo I managed to get it working. Probably wowjs isn't compatible with version 4.1.1 of animate.css

So, I saved animate.css and wow.min.js In the same folder as the HTML and CSS code below

CODE:

body{

    display:flex;
     justify-content:center;
}


.test {
        width: 500px;
        background-color: #000;
        height:250px;
        margin-top:auto;
        color:#ffff;
        padding-top:5%;
        text-align:center;
}
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  rel="stylesheet"
/>

<div class="test wow bounceInUp">
  Content to Reveal Here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
  new WOW().init();
</script>
MahmouD Skafi
  • 370
  • 3
  • 15
Peri Kost
  • 138
  • 1
  • 4