From de0372e3592738bb035e98ec6f8f774f8470b81b Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 18 Dec 2019 17:07:21 +1000
Subject: [PATCH] change chaos anim

---
 client/src/components/anims/chaos.jsx | 39 +++++----------------------
 1 file changed, 6 insertions(+), 33 deletions(-)

diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx
index 205a661f..a482967e 100644
--- a/client/src/components/anims/chaos.jsx
+++ b/client/src/components/anims/chaos.jsx
@@ -8,8 +8,8 @@ const { randomPoints } = require('../../utils');
 function projectile(x, y, radius, colour) {
     return (
         <circle
-            cx={x}
-            cy={y}
+            cx={anime.random(-400, 400)}
+            cy={anime.random(-400, 400)}
             r={radius}
             fill={colour}
             stroke={colour === '#a52a2a' ? 'none' : '#f5f5f5'}
@@ -23,7 +23,7 @@ class Chaos extends Component {
     constructor() {
         super();
         this.animations = [];
-        const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 });
+        const points = randomPoints(20, 30, { x: 0, y: 0, width: 1000, height: 1000 });
         this.charges = points.map(coord => {
             const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
             return projectile(coord[0], coord[1], '0.5em', colour);
@@ -58,37 +58,12 @@ class Chaos extends Component {
 
     componentDidMount() {
         const projectiles = document.querySelectorAll('.skill-anim circle');
-        anime.set('.skill-anim', {
-            translateY: -(window.innerHeight) * 0.35 * this.props.direction.y,
-            translateX: -(window.innerWidth) * 0.15 * this.props.direction.x,
-            opacity: 0,
-        });
-
-        this.animations.push(anime({
-            targets: '.skill-anim',
-            opacity: [
-                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.3 },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
-            ],
-        }));
-
-
-        this.animations.push(anime({
-            targets: '.skill-anim',
-            translateY: 0,
-            translateX: 0,
-            loop: false,
-            duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
-            easing: 'easeInQuad',
-        }));
-
         this.animations.push(anime({
             targets: ['#chaosRedFilter feTurbulence', '#chaosRedFilter feDisplacementMap'],
             baseFrequency: 2,
             scale: 5,
             numOctaves: 3,
             easing: 'easeOutSine',
-
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -96,11 +71,9 @@ class Chaos extends Component {
             targets: proj,
             cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
             cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
-            // cx: 150,
-            // cy: 200,
-            // opacity: 0,
-            duration: (TIMES.TARGET_DURATION_MS * 2 / 3),
-            easing: 'easeInQuad',
+            duration: anime.random(TIMES.TARGET_DURATION_MS * 2 / 3, TIMES.TARGET_DURATION_MS),
+            opacity: 0,
+            easing: 'easeInExpo',
         })));
     }