Wordpress Question posted in
The official Wordpress documentation can be found here.

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>

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

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

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    Good day, curlybom.
    Can you please check if Jquery also attached to template?
    I think wow.js and animate js need Jquery.

    <script src='https://code.jquery.com/jquery-3.6.0.min.js' id='jquery-core-js'></script>

    Tell please if it works…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search