Django website wow.js and animate.css is not working

Question

I got animate.css to work fine , but when i imported wow.js into my static folder, it did not function on the scroll or just in general. The animation part only works without the "wow" class.
As my website is built with django, im not sure if that has anything to do with it. Here is the code that includes the animate and wow files.

<link rel="stylesheet" href="{% static 'css/animate.css' %}">

this is the only one that works:

<div class="container">
    <h1 class="animate__animated animate__bounce" style="color:black;">An animated element</h1>

all of these do not work and i don't know what i am doing wrong:

    </div>
    <div class="container">
    <h1 class="wow animate__bounce" style="color:black;">An animated element</h1>
    </div>
    <div class="container">
    <h1 class="wow bounce" style="color:black;">An animated element</h1>
    </div>
    <div class="wow bounce">
    <h1 class="wow bounce" style="color:black;">An animated element</h1> 
    </div>

I have these loaded in as well:

    <script language="javascript" type="text/javascript" src="{% static 'js/wow.min.js' %}"></script>
    <script>new WOW().init();</script>

Attached image of my folder hierarchy

The wow.js does not work wherever i put the containers on the page. All of this code is in my base.html folder (please refer to the image attached)

This is my console log:

[19/Jun/2020 17:46:10] "GET /favicon.ico HTTP/1.1" 404 4547
[19/Jun/2020 17:46:20] "GET / HTTP/1.1" 200 7917
[19/Jun/2020 17:46:20] "GET /static/css/master.css HTTP/1.1" 200 
1631
[19/Jun/2020 17:46:20] "GET /static/css/animate.css HTTP/1.1" 200 
95376
[19/Jun/2020 17:46:20] "GET /static/css/blog.css HTTP/1.1" 200 506
[19/Jun/2020 17:46:20] "GET /static/js/wow.min.js HTTP/1.1" 200 8155
[19/Jun/2020 17:46:20] "GET /media/blog_pic/markus-spiske- 
qjnAnF0jIGk-unsplash.jpg HTTP/1.1" 200 634265
[19/Jun/2020 17:46:20] "GET /media/blog_pic/IMG_4779_1s6meGH.jpg 
HTTP/1.1" 200 829413
[19/Jun/2020 17:46:20] "GET /media/blog_pic/kelly-sikkema- 
lJrTJHzQjOs-unsplash.jpg HTTP/1.1" 200 162152
[19/Jun/2020 17:46:20] "GET /static/pictures/linkedin-logo.png 
HTTP/1.1" 200 3346
Not Found: /favicon.ico
[19/Jun/2020 17:46:21] "GET /favicon.ico HTTP/1.1" 404 4547

On my website, they are further down with other information (i did not include as it would be too messy on this thread) but does not even animate when the "wow" class is in them or not.
If anyone could help, please let me know. Thanks

Can you confirm from console logs if `wow.min.js`'s get response is 200? — Hisham___Pak, Jun 19 '20 at 18:09
I have attached it to the question. It seems to get a 200 yes. — Oliver Weisfeld, Jun 19 '20 at 18:12

score 0 · Answer 1 · answered Sep 04 '20 at 18:33

I couldn't work with the CDN versions, until I came across a recent video on YouTube.

The workaround is to download the wow master and extract it in the static folder of your project.

<!-- CSS -->
<!-- Animate  local static CSS -->
<link rel="stylesheet" href="{% static 'WOW-master/css/libs/animate.css' %}" >

<!-- JS -->
<!-- LOCAL STATIC WOW JS -->
<script src="{% static 'WOW-master/dist/wow.min.js' %}" ></script>

That works for me, at least for now.

YouTube video: https://www.youtube.com/watch?v=fM1WKHW7k8I&feature=youtu.be

Thanks! I will give it a try. – Oliver Weisfeld Sep 07 '20 at 11:37 — Oliver Weisfeld, Sep 07 '20 at 11:37

score 0 · Answer 2 · answered Sep 19 '20 at 06:23

I had this before took me a while it was a problem from the browser actually.

Solved by changing google chrome to google chrome for developers.

Try downloading a new browser for developers.

"And never ever open two browsers at the same time" Gunter O'dimm

Django website wow.js and animate.css is not working

2 Answers2