2

I'm in a weird kinda trouble. I have the following code in main.html:

updated link to animejs and changed CSS class reference

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
anime({
  targets: '.square',
  backgroundColor: '#ffea00',
  borderRadius: '50%',
  duration: 3000,
  scale: 3,
  loop: true
});

</script>

<style type="text/css">
.square {
  width: 60px;
  height: 60px;
  margin: 10px;
  background-color: deepskyblue;
}
</style>
</head>

<body>

<div class="square"></div>

</body>
</html>

I expect my square to enlarge and round off, but all I get is the original deep-sky-blue square. In other words, amine.js animation does not start.

What is the problem with my very simple case?

I open main.html with Google Chrome on MacOS.

Boris Smirnov
  • 21
  • 3
  • With your last edit (that fixed the selector) this is now a duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Andreas Nov 16 '20 at 16:22
  • @Andreas Yaaay, the order DOES matter, it worked! Thank you a bunch! – Boris Smirnov Nov 16 '20 at 16:23

1 Answers1

0

You need to use a CSS selector for your target: targets: '.square'

Try this:

anime({
  targets: '.square',
  backgroundColor: '#ffea00',
  borderRadius: '50%',
  duration: 3000,
  scale: 3,
  loop: true
});
.square {
  width: 60px;
  height: 60px;
  margin: 10px;
  background-color: deepskyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<div class="square"></div>
zeterain
  • 1,140
  • 1
  • 10
  • 15
  • Sorry for my mistake, I tried this out before and it does not work. Tried again now and still no animation. There's something wrong with my whole set up, it seems. – Boris Smirnov Nov 16 '20 at 16:14