Why isn't anime.js working?

Question

I'm trying to load anime.js into my website and it isn't working. I have downloaded the .ZIP and placed it into a subfolder called /js/ and reference correctly. I even can view the anime.min.js file in the sources on Chrome's inspection.

  <body>
    <div class="container">
    <div class="section center">
      <h1 class="title"></h1>      
          <section>
                <div class="purple"></div>
                <div class="darkgreen"></div>
                <div class="darkred"></div>
            </div>
          </div>
          </section>      
      </div>
    </div>
  <footer class="center">


    <p>CREATED BY HARRY BENDIX-LEWIS | 2017</p>
      </footer>
      <script src="js/anime.min.js" type="text/javascript">
      window.onload = function() {
      anime({
      targets: ['.purple', '.darkgreen', '.darkred'],
      rotate: 360,
      borderRadius: '50%',
      duration: 3000,
      loop: true
    });
    }
      </script>
    </body>

I also have:

<script src="js/anime.min.js"></script>

In my head.

Edit: forgot my CSS

div {
    height: 50px;
  width: 50px;
    margin: 10px;
}

.purple {
    background-color: purple;
}

.darkgreen {
    background-color: darkgreen;
}

.darkred {
    background-color: darkred;
}

It makes no sense to me why the animation won't work. I took that code from an example page on CodePen.

score 5 · Accepted Answer · answered May 17 '17 at 14:09

5

You are loading the script at the same time at your own code, since you are using the same tag. You must ensure anime.min.js is read before your code or anime will be undefined. Put it in two separate script elements:

<script src="js/anime.min.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function() {
        anime({
            targets: ['.purple', '.darkgreen', '.darkred'],
            rotate: 360,
            borderRadius: '50%',
            duration: 3000,
            loop: true
        });
    }
</script>

If error persists, you can always check if anime exists checking window.anime !== undefined, otherwise using a timeout, but this way i said before should work

answered May 17 '17 at 14:09

Diego N.

562
3
10

1

"You are loading the script at the same time at your own code, since you are using the same tag." This statement isn't completely accurate. Per the spec, "If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions." See [here](http://stackoverflow.com/a/6528343/47589) – May 17 '17 at 14:19
@Amy nice appointment, i knew that it can have issues, but didn't knew the exact reason. Thank you! – Diego N. May 18 '17 at 09:32

Why isn't anime.js working?

1 Answers1