почему не работает wowjs?

Question

Доброго дня всем читающим.

Решил использовать wowjs в стаке с tailwindcss, но анимация на странице не работает. В консоли ошибок не появляется, найденные в гугле ответы на аналогичный вопрос не помогли, к сожалению

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="assets/css/animate.css">
  <link rel="stylesheet" href="assets/css/main.css">

  <title>Document</title>
</head>

<body class="relative bg-[#fff]">
  <header class="absolute top-0 left-0 w-full">
    <nav class="bg-transparent">
      <div class="container">
        <div class="relative flex items-center justify-between h-16 py-[16px] sm:py-4 lg:py-8">
          <div class="flex-1 flex items-center justify-start sm:items-stretch sm:justify-start">
            <div class="flex-shrink-0 flex items-center">
              <img class="block lg:hidden h-8 w-auto wow rotateIn" src="./assets/img/logo.svg" alt="Workflow">
              <img class="hidden lg:block h-8 w-auto wow rotateIn" src="./assets/img/logo.svg" alt="Workflow">
            </div>

          </div>
          <div class="absolute inset-y-0 right-0 flex items-center">
            <!-- Mobile menu button-->
            <a class="inline-block 
            bg-gradient-to-t from-[#bcb0ee] via-purple to-[#bcb0ee]
            border-2 
            border-[#bcb0ee]/[.40]
            drop-shadow-lg
            hover:drop-shadow-xl
            hover: bg-purple
            rounded-full 
            px-4 
            py-0 
          text-white" href="">My CV</a>
          </div>
        </div>
      </div>
    </nav>
  </header>

  <main>

    <section class="hero pt-20">
      <div class="wrapper py-[40px] px-[33px]">
        <div class="block text-left sm:text-center wow fadeInUp">
          <h1 class="mb-7 sm:mb-8 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">Harshit Saini</h1>
          <h3 class="my-7 sm:mb-8 text-purple wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">Position of Harshit Saini</h3>
          <p class="my-7 sm:my-8 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">Short description to Harshit</p>
        </div>
        <div class="button text-left sm:text-center ">
          <a class="
            inline-block 
            bg-gradient-to-t from-[#bcb0ee] via-purple to-[#bcb0ee]
            border-2 
            border-[#bcb0ee]/[.40]
            drop-shadow-lg
            hover:drop-shadow-xl
            rounded-full 
            px-4 
            py-2 
            text-white">
            Contact
            with me
          </a>
        </div>
      </div>
    </section>

    <section class="about bg-zinc-300">
      <div class="container">
        <div class="block">
          <div class="wow bounceInUp" data-wow-duration="1s" data-wow-delay=".1s">
            <h2>About me</h2>
            <p>Short description about me</p>
            <div>Support Unicorn Witnesses</div>
          </div>
          <div class="img_block">
            <div class="img_element">
              <div class="img_background"></div>
              <img src="" alt="">
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="achievements bg-orange-300">achievements</section>

    <section class="contacts bg-lime-400 wow animate__backInDown">contacts</section>

  </main>

  <footer class="wow">asd</footer>
  <script src="assets/js/main.js"></script>
  <script src="assets/js/wow.js"></script>
  <script>new WOW().init()</script>
</body>

</html>

main.css

.wow {
  visibility: hidden;
}

Структура проекта на скриншоте

БЛОГ НА HUSL

почему не работает wowjs?

Ответы (0 шт):