javascript - Why isn't anime.js working?

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.

  <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.

Share Improve this question edited May 17, 2017 at 14:08 Bertrand Marron 22.3k8 gold badges62 silver badges95 bronze badges asked May 17, 2017 at 14:06 mythtech 231 silver badge5 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why isn't anime.js working? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)