wow.js and animate.css doesn’t work on wordpress theme

I added wow.min.js and initializing the WOW on the end of the body and animate.css on the header. But after adding the classes to elements, animation doesn’t appear.

I tried adding the CSS and js file via function.php but that didn’t work too.

body:

<?php wp_footer();?>
<script src="<?php echo get_template_directory_uri() . '/js/wow.min.js' ?>"></script>
        <script>
     wow = new WOW();
        wow.init();
        </script>
</body>

JavaScript
​x
 
<?php wp_footer();?><script src="<?php echo get_template_directory_uri() . '/js/wow.min.js' ?>"></script>        <script>     wow = new WOW();        wow.init();        </script></body>​

header:

<head>
    <meta charset="<?php bloginfo('charset');?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/header.css' ?>">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/animate.min.css' ?>">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <?php wp_head();?>
</head>

JavaScript
 
<head>    <meta charset="<?php bloginfo('charset');?>">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="profile" href="https://gmpg.org/xfn/11">  <link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/header.css' ?>">  <link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/animate.min.css' ?>">    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">​    <?php wp_head();?></head>​

Answer

After spending 2 days on the issue, I’ve found out that I should add animate__animated along with other class names to execute the animation. I don’t know if this is a new update on animate.css, but tutorials never mentioned this. Embedding the scripts was all fine.

Advertisement

Answer