Why isn't anime.js working in my browser?

Question

For some reason my anime.js isn't working in my browser, but when I give my code to people I know online, it works just fine for them.

Here's my HTML code:

<div id="CSStransforms">
  <div class="square el"></div>
</div>

and yes, I have linked the cdn ->

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script src="main.js"></script>

and here's my JAVASCRIPT code:

var CSStransforms = anime({
  targets: '#CSStransforms .el',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});

here's all my code: https://codepen.io/sadsada/pen/GxKePJ

Answer 1

You need to load your main.js at the end of the body tag, so the DOM has been loaded by the time your script executes. If you put it in the head (above the body), the DOM has not loaded your elements yet, so anime.js doesn't find them.

This is why the codepen works but your own site didn't. The codepen loads the DOM before executing your scripts.