refactor and fix for avatar animations, invert / banish

client/src/components/anims/banish.jsx

@@ -1,42 +1,17 @@
-const preact = require('preact');
-const { Component } = require('preact');
-
 const anime = require('animejs').default;
+
 const { TIMES } = require('../../constants');
 
-class Banish extends Component {
-    constructor(props) {
-        super();
-        this.id = props.id;
-        this.animations = [];
-    }
-
-    render() {
-        // Need this so unmount triggers
-        return <svg id='invert'></svg>;
-    }
-
-    componentDidMount() {
-        this.animations.push(anime({
-            targets: [document.getElementById(this.id)],
-            scaleY: 0,
-            fill: '#fff',
-            easing: 'easeOutElastic',
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_DURATION_MS * 0.5,
-            direction: 'alternate',
-        }));
-    }
-
-    // this is necessary because
-    // skipping / timing / unmounting race conditions
-    // can cause the animations to cut short, this will ensure the values are reset
-    // because preact will recycle all these components
-    componentWillUnmount() {
-        for (let i = this.animations.length - 1; i >= 0; i--) {
-            this.animations[i].reset();
-        }
-    }
+function Banish(id) {
+    return anime({
+        targets: [document.getElementById(id)],
+        scaleY: 0,
+        fill: '#fff',
+        easing: 'easeOutElastic',
+        delay: TIMES.TARGET_DELAY_MS,
+        duration: TIMES.TARGET_DURATION_MS * 0.45,
+        direction: 'alternate',
+    });
 }
 
 module.exports = Banish;

client/src/components/anims/idle.jsx

@@ -0,0 +1,18 @@
+const anime = require('animejs').default;
+
+function idle(id) {
+    const duration = anime.random(2000, 18000);
+    const target = document.getElementById(id);
+    return anime({
+        targets: target,
+        translateX: () => anime.random(-20, 20),
+        translateY: () => anime.random(0, -40),
+        rotate: () => anime.random(-15, 15),
+        duration,
+        direction: 'alternate',
+        easing: 'linear',
+        loop: true,
+    });
+}
+
+module.exports = idle;

client/src/components/anims/invert.jsx

@@ -1,41 +1,16 @@
-const preact = require('preact');
-const { Component } = require('preact');
-
 const anime = require('animejs').default;
+
 const { TIMES } = require('../../constants');
 
-class Invert extends Component {
-    constructor(props) {
-        super();
-        this.id = props.id;
-        this.animations = [];
-    }
-
-    render() {
-        // Need this so unmount triggers
-        return <svg id='invert'></svg>;
-    }
-
-    componentDidMount() {
-        this.animations.push(anime({
-            targets: [document.getElementById(this.id)],
-            rotate: 180,
-            delay: TIMES.TARGET_DELAY_MS,
-            duration: TIMES.TARGET_DURATION_MS * 0.45,
-            easing: 'easeInOutElastic',
-            direction: 'alternate',
-        }));
-    }
-
-    // this is necessary because
-    // skipping / timing / unmounting race conditions
-    // can cause the animations to cut short, this will ensure the values are reset
-    // because preact will recycle all these components
-    componentWillUnmount() {
-        for (let i = this.animations.length - 1; i >= 0; i--) {
-            this.animations[i].reset();
-        }
-    }
+function Invert(id) {
+    return anime({
+        targets: [document.getElementById(id)],
+        rotate: 180,
+        delay: TIMES.TARGET_DELAY_MS,
+        duration: TIMES.TARGET_DURATION_MS * 0.45,
+        easing: 'easeInOutElastic',
+        direction: 'alternate',
+    });
 }
 
 module.exports = Invert;

client/src/components/anims/source.cast.jsx

@@ -0,0 +1,17 @@
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+function sourceCast(id, params) {
+    const { x, y } = params;
+    return anime({
+        targets: [document.getElementById(id)],
+        translateX: x * 200,
+        translateY: y * 200,
+        easing: 'easeInOutElastic',
+        direction: 'alternate',
+        duration: TIMES.SOURCE_DURATION_MS,
+    });
+}
+
+module.exports = sourceCast;