AnimeJs random happens only once - random

Question

I made a function to randomly pick a color for each element in the animejs but it doesn't work as expected. the random colors are picked only for the initiation of animation and on loop the colors don't change, is there any workaround to this?
here's what i have:
anime({
targets: '.jumperTexts',
scale: [
{value: [0.5 , 1], easing: 'easeInOutBounce', duration: 800}
],
backgroundColor:function(){
let letters = "3456789ABCDEF";
let color = '#';
for (let i = 0; i < 6; i++)
color += letters[(Math.floor(Math.random() * 13))];
return color;},
width:['80px','80px'],
height:['80px','80px'],
borderRadius: ['50%','50%'],
duration: 1200,
endDelay: 1000,
delay:anime.stagger(50),
direction: 'alternate',
loop: true
});

Answer 1

Most elegant way to do this using callback .complete:
function animate() {
anime({
targets: '.some-target',
opacity: function () {
// Generates random opacity each time animation is triggered
return anime.random(0.25,1);
},
complete: function (anim) {
// Re-triggers animation by callback.
animate();
}
});
}
This also works with anime.timeline().

Answer 2

I ran into the same problem some time ago. Function based values can be random, but that randomness is generated only once and the values stay the same, they're not generated each time the animation runs. That wasn't obvious to me, but checking the documentation for Function Generated Values you can confirm this. Clicking the example restarts the animation and changes the random values.
To solve this, I created a separate function to generate my random values, and global variables to receive them. Then I used loopComplete to call that function and update the random values. Here's an example of my code.
let myRandom;
function randomN() {
myRandom = Math.random();
console.log(myRandom);
}
function animateMe() {
let myAnim = anime({
targets: 'body',
//use myRandom value on any animatable property you like
duration: 1000,
easing: 'linear',
direction: 'alternate',
loop: true,
loopBegin: function (anim) {
randomN();
}
});
}
You can also call the random function after the animation finishes by using loopComplete. If you're not using loop, then you can use begin and complete.