php - 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/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<?php wp_head();?>
</head>
Answer
Solution:
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...
Answer
Solution:
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.