fix sketchy idle animation

client/src/components/account.box.jsx

@@ -59,8 +59,13 @@ class AccountAvatar extends Component {
     }
 
     componentDidMount() {
-        this.idle = idleAnimation(this.props.account.id);
+        const startIdle = () => {
-        return this.animations.push(this.idle);
+            this.idle = idleAnimation(this.props.account.id);
+            this.animations.push(this.idle);
+            this.idle.finished.then(startIdle);
+        };
+
+        startIdle();
     }
 
     resetAnimations() {

client/src/components/anims/idle.jsx

@@ -1,8 +1,9 @@
 const anime = require('animejs').default;
 
 function idle(id) {
-    const duration = anime.random(2000, 18000);
+    const duration = anime.random(2000, 4000);
     const target = document.getElementById(id);
+
     return anime({
         targets: target,
         translateX: () => anime.random(-20, 20),
@@ -10,8 +11,7 @@ function idle(id) {
         rotate: () => anime.random(-15, 15),
         duration,
         direction: 'alternate',
-        easing: 'linear',
+        easing: 'easeInOutSine',
-        loop: true,
     });
 }
 

client/src/components/construct.jsx

@@ -48,8 +48,13 @@ class ConstructAvatar extends Component {
     }
 
     componentDidMount() {
-        this.idle = idleAnimation(this.props.construct.id);
+        const startIdle = () => {
-        return this.animations.push(this.idle);
+            this.idle = idleAnimation(this.props.construct.id);
+            this.animations.push(this.idle);
+            this.idle.finished.then(startIdle);
+        };
+
+        startIdle();
     }
 
     resetAnimations() {

client/src/components/mnni.jsx

@@ -34,8 +34,13 @@ class MnniAvatatr extends Component {
     }
 
     componentDidMount() {
-        this.idle = idleAnimation('mnni');
+        const startIdle = () => {
-        return this.animations.push(this.idle);
+            this.idle = idleAnimation('mnni');
+            this.animations.push(this.idle);
+            this.idle.finished.then(startIdle);
+        };
+
+        startIdle();
     }
 
     resetAnimations() {

client/src/components/player.box.jsx

@@ -37,8 +37,13 @@ class Img extends Component {
     }
 
     componentDidMount() {
-        this.idle = idleAnimation(this.props.id);
+        const startIdle = () => {
-        return this.animations.push(this.idle);
+            this.idle = idleAnimation(this.props.id);
+            this.animations.push(this.idle);
+            this.idle.finished.then(startIdle);
+        };
+
+        startIdle();
     }
 
     resetAnimations() {