CODEWITHSUNDEEP
javascriptanimationanime.js
senty
senty

Reputation: 12847

Infinite animejs animation

I have a flowless pattern image and I am using background image with repeat.

With anime.js I am trying to do backgroundPositionY: '-=10%' every 5 seconds but I want it to run forever; and as the image is on repeat, it won't cause any visual problem.

Is it possible to do that with anime.js without creating a for loop or setInterval?

anime({
     targets: 'h1 > div',
     backgroundPositionY: '-=10%',
     easing: 'linear',
     duration: 5000,
});

Upvotes: 1

Views: 2771

Answers (2)

Different55
Different55

Reputation: 587

Anime.js animations reset to their initial position and follow the same path every time, even with only using offset coordinates. The trick around that is to never technically run the same animation twice.

By wrapping your animation in a function, and setting that function as the animation's complete callback, you can get an animation that doesn't repeat itself:

function animate() {
  anime({
    targets: '#runaway',
    translateX: ["+=3em", "+=0", "+=0", "+=0"],
    translateY: ["+=0", "+=0", "+=3em", "+=0"],
    rotate: ["+=0", "+=90", "+=0", "-=90"],
    scaleX: ["*=-1", "+=0", "*=-1", "+=0"],
    duration: 2000,
    easing: 'easeOutElastic(1, .8)',
    complete: animate,
  });
}

animate();
#runaway {
  width: 3em;
  height: 3em;
  background-color: #698ac8;
}

body {
  overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div id="runaway"></div>

Upvotes: 1

Aaron McGuire
Aaron McGuire

Reputation: 1255

Setting the loop to true should play the animation infinitely. you may wish to additionally add direction:'alternate' too so it doesn't just reset after each loop

   anime({
     targets: 'h1 > div',
     backgroundPositionY: '-=10%',
     easing: 'linear',
     duration: 5000,
     loop:true
    });

Upvotes: 2

Related Questions