Link to my live website, https://travelaja.vercel.app/
I followed the animate.css and wow.js documentation on how to configure the libraries to work and correctly did that after initially misconfiguring the script.
I added the animate.css and wow.js using their CDN,
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>new WOW().init();</script>
The animate.css is added in the head tag while the script tags are added at the bottom of the page.
I added the classnames, wow slideInLeft inside of the section (this is the second immediately after the hero section) with about-us `` class. When I inspected it, I observed it had the visibility of hidden and then visible when I scrolled to the location with the animated class added and the animated name of slideInLeft```, but the only issue I am having is that the animation itself is not visible or has no effect.
I checked a GitHub issue and someone suggested removing the overflow-x: hidden on the body or HTML which I observed I had and removed but the issue persisted.
I was initially facing WOW is not defined issue, which I fixed by placing the script at the end of the page and the error was gone.
I was following the instruction from, "https://wowjs.uk/docs.html" and the way the classes was being used was quite different, I switched to using this instead, "https://animate.style/" and added the wow class as well and it worked just fine.
A snippet of the former/wrong usage.
<div class="section-1 wow slideInLeft">
your content
</div>
A snippet of the new/right usage.
<div class="section-1 wow animate__animated animate__slideInLeft">
your content
</div>