fix animations

client/src/utils.jsx

@@ -56,8 +56,34 @@ function requestAvatar(name) {
         .then(svg => svg);
 }
 
+const animations = {};
+function animateCryp(id) {
+    if (animations[id]) return false;
+    animations[id] = true;
+    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: () => anime.random(2000, 5000),
+        delay: () => anime.random(0, 2000),
+        direction: 'alternate',
+        easing: 'linear',
+        loop: true,
+        complete: () => animations[id] = false,
+    });
+}
+
+function clearAnimation(id) {
+    animations[id] = false;
+}
+
 function crypAvatar(name, id) {
-    useEffect(() => animateCryp(id));
+    useEffect(() => {
+        animateCryp(id);
+        return () => clearAnimation(id);
+    });
 
     return (
         <img
@@ -537,21 +563,6 @@ function convertItem(v) {
     // return;
 }
 
-function animateCryp(id) {
-    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: () => anime.random(2000, 5000),
-        delay: () => anime.random(0, 2000),
-        direction: 'alternate',
-        easing: 'linear',
-        loop: true,
-    });
-}
-
 module.exports = {
     animateCryp,
     stringSort,