3

I'm using the anime JS library, I've added two animations to a div, the second animation starts when the first animation has finished. But the problem is that I want just the second animation to keep looping, I've set the property "loop" to "true" on the second animation, but it still won't loop, every property works fine except the "loop" property, how can I make just the second animation loop over and over again?

HTML code:

<body>

    <div></div>
    
</body>

CSS code:

div{
    height: 100px;
    width: 100px;
    background-color: rgb(161, 6, 6);
}

JavaScript code:

"use strict";

let square = document.querySelector("div")

anime.timeline()
    .add({
        targets: square,
        backgroundColor: "#3dbf7a",
        duration: 2000,
    })
    .add({
        targets: square,
        translateX: [0,100],
        translateY: [0,100],
        duration: 1000,
        loop: true,
    })
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Saud Alghamdi
  • 149
  • 1
  • 9

1 Answers1

1

As mentioned in the comments, this is an existing issue in the library. In this workaround, I needed to put the anim.restart() call inside a setTimeout to ensure the javascript executed in a new event loop.

let square = document.querySelector("div");

anime.timeline()
  .add({
    targets: square,
    backgroundColor: "#3dbf7a",
    duration: 2000,
  }).add({
    targets: square,
    translateX: [0, 100],
    translateY: [0, 100],
    duration: 1000,
    changeComplete: anim => setTimeout(() => anim.restart())
  });
div {
  height: 100px;
  width: 100px;
  background-color: rgb(161, 6, 6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div></div>

jsFiddle

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61