From c3a8463ea991884ee2035b2ed9eba4d6f9a6ee3a Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 4 Feb 2020 20:56:03 +1000
Subject: [PATCH] fix sketchy idle animation

---
 client/src/components/account.box.jsx | 9 +++++++--
 client/src/components/anims/idle.jsx  | 6 +++---
 client/src/components/construct.jsx   | 9 +++++++--
 client/src/components/mnni.jsx        | 9 +++++++--
 client/src/components/player.box.jsx  | 9 +++++++--
 5 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/client/src/components/account.box.jsx b/client/src/components/account.box.jsx
index 0ff61b8f..1071e129 100644
--- a/client/src/components/account.box.jsx
+++ b/client/src/components/account.box.jsx
@@ -59,8 +59,13 @@ class AccountAvatar extends Component {
     }
 
     componentDidMount() {
-        this.idle = idleAnimation(this.props.account.id);
-        return this.animations.push(this.idle);
+        const startIdle = () => {
+            this.idle = idleAnimation(this.props.account.id);
+            this.animations.push(this.idle);
+            this.idle.finished.then(startIdle);
+        };
+
+        startIdle();
     }
 
     resetAnimations() {
diff --git a/client/src/components/anims/idle.jsx b/client/src/components/anims/idle.jsx
index 0972b4ac..82f3484a 100644
--- a/client/src/components/anims/idle.jsx
+++ b/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',
-        loop: true,
+        easing: 'easeInOutSine',
     });
 }
 
diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx
index 0c979107..ddd7cc30 100644
--- a/client/src/components/construct.jsx
+++ b/client/src/components/construct.jsx
@@ -48,8 +48,13 @@ class ConstructAvatar extends Component {
     }
 
     componentDidMount() {
-        this.idle = idleAnimation(this.props.construct.id);
-        return this.animations.push(this.idle);
+        const startIdle = () => {
+            this.idle = idleAnimation(this.props.construct.id);
+            this.animations.push(this.idle);
+            this.idle.finished.then(startIdle);
+        };
+
+        startIdle();
     }
 
     resetAnimations() {
diff --git a/client/src/components/mnni.jsx b/client/src/components/mnni.jsx
index f1506dfc..cde56f78 100644
--- a/client/src/components/mnni.jsx
+++ b/client/src/components/mnni.jsx
@@ -34,8 +34,13 @@ class MnniAvatatr extends Component {
     }
 
     componentDidMount() {
-        this.idle = idleAnimation('mnni');
-        return this.animations.push(this.idle);
+        const startIdle = () => {
+            this.idle = idleAnimation('mnni');
+            this.animations.push(this.idle);
+            this.idle.finished.then(startIdle);
+        };
+
+        startIdle();
     }
 
     resetAnimations() {
diff --git a/client/src/components/player.box.jsx b/client/src/components/player.box.jsx
index f4f0908f..7e135133 100644
--- a/client/src/components/player.box.jsx
+++ b/client/src/components/player.box.jsx
@@ -37,8 +37,13 @@ class Img extends Component {
     }
 
     componentDidMount() {
-        this.idle = idleAnimation(this.props.id);
-        return this.animations.push(this.idle);
+        const startIdle = () => {
+            this.idle = idleAnimation(this.props.id);
+            this.animations.push(this.idle);
+            this.idle.finished.then(startIdle);
+        };
+
+        startIdle();
     }
 
     resetAnimations() {