diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx
index 75dd1dbf..4b1735b8 100644
--- a/client/src/components/anims/chaos.jsx
+++ b/client/src/components/anims/chaos.jsx
@@ -23,7 +23,7 @@ function projectile(x, y, radius, colour) {
 }
 
 class AttackCharge extends Component {
-    constructor(props) {
+    constructor() {
         super();
         this.animations = [];
         const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });
diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx
index 9ebc6646..e4916117 100644
--- a/client/src/components/anims/slay.jsx
+++ b/client/src/components/anims/slay.jsx
@@ -35,8 +35,7 @@ function sword(colour) {
 class AttackCharge extends Component {
     constructor(props) {
         super();
-        this.team = props.team;
-        // this.colour = props.colour;
+        this.animations = [];
         this.colour = '#a52a2a';
         const points = new Array(30).fill(0);
         this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
@@ -81,6 +80,7 @@ class AttackCharge extends Component {
         anime.set('.skill-anim', {
             translateY: -400,
             translateX: 0,
+            opacity: 0,
         });
         anime.set('#explosion feDisplacementMap', {
             scale: 100,
@@ -91,47 +91,56 @@ class AttackCharge extends Component {
             stroke: this.colour,
         });
 
-        anime.set('#projectile', {
-            cx: 150,
-            cy: 420,
-        });
-
-        anime({
+        this.animations.push(anime({
             targets: '.skill-anim',
+            opacity: [
+                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
+                {
+                    value: 0, 
+                    delay: TIMES.TARGET_DURATION_MS * 0.7 + TIMES.POST_SKILL_DURATION_MS * 0.8,
+                    duration: TIMES.POST_SKILL_DURATION_MS * 0.2,
+                }],
             translateY: 0,
             translateX: 0,
             loop: false,
+            delay: TIMES.TARGET_DELAY_MS,
             duration: (duration * 1 / 2),
             easing: 'easeInQuad',
-        });
-        anime({
+        }));
+        this.animations.push(anime({
             targets: '#explosion feDisplacementMap',
             scale: 10000,
             loop: false,
-            delay: (duration * 1 / 2),
+            delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
             duration: (duration * 1 / 2),
             easing: 'easeInQuad',
-        });
+        }));
 
-        anime({
+        this.animations.push(anime({
             targets: '#sword',
             fill: '#1FF01F',
             stroke: '#1FF01F',
-            delay: (duration * 3 / 4),
-        });
+            delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
+        }));
 
         const projectiles = document.querySelectorAll('#projectile');
         projectiles.forEach(proj => {
-            anime({
+            this.animations.push(anime({
                 targets: proj,
                 cx: Math.random() * 250 + 25,
                 cy: Math.random() * 200 - 100,
-                delay: (duration * 2 / 3),
-                duration: (duration * 1 / 3),
+                delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
+                duration: (TIMES.POST_SKILL_DURATION_MS * 0.3),
                 easing: 'easeInQuad',
-            });
+            }));
         });
     }
+
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
 }
 
 module.exports = AttackCharge;