Anime.js animation does not start

user_6718757 0
Viewed 148

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.

anime.js html javascript
1 Answers

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>

user_40172540
Related