diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index 1a715313..760b5bbe 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -1,11 +1,7 @@
 const preact = require('preact');
-const anime = require('animejs').default;
-
-const AttackCharge = require('./anims/attack.charge');
 
 const Amplify = require('./anims/amplify');
 const Absorb = require('./anims/absorb');
-const Banish = require('./anims/banish');
 const Bash = require('./anims/bash');
 const Blast = require('./anims/blast');
 const Block = require('./anims/block');
@@ -23,7 +19,6 @@ const Haste = require('./anims/haste');
 const Heal = require('./anims/heal');
 const Hybrid = require('./anims/hybrid');
 const Intercept = require('./anims/intercept');
-const Invert = require('./anims/invert');
 const Link = require('./anims/link');
 const Purify = require('./anims/purify');
 const Purge = require('./anims/purge');
@@ -45,18 +40,6 @@ const TriageTick = require('./anims/triage.tick');
 
 const { removeTier } = require('../utils');
 
-const colours = {
-    red: '#a52a2a',
-    green: '#1FF01F',
-    blue: '#3498db',
-    purple: '#A25AC1',
-    yellow: '#d1c86a',
-    cyan: '#6AD1BF',
-    white: '#FFFFFF',
-};
-
-const { TIMES } = require('../constants');
-
 function animations(props) {
     const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props;
     if (!resolution || resolution === 'clear') return false;
@@ -73,21 +56,11 @@ function animations(props) {
     const sourceIsPlayer = playerTeamIds.includes(construct.id);
     const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
 
-    const skipSource = (resolution.source.id === resolution.target.id
-        && ['Invert', 'Banish'].includes(removeTier(event.skill)));
-
-    if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
+    const getDirection = () => {
         const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);
-
         let y = 0;
         if (!sameTeam) y = targetIsPlayer ? 1 : -1;
 
-        //    const y = sameTeam
-        //      ? 0
-        //      : targetIsPlayer
-        //          ? 1
-        //          : -1;
-
         const i = sourceIsPlayer
             ? playerTeamIds.findIndex(c => c === construct.id)
             : otherTeamIds.findIndex(c => c === construct.id);
@@ -97,33 +70,34 @@ function animations(props) {
             : otherTeamIds.findIndex(c => c === resolution.target.id);
 
         const x = j - i;
+        return { x, y };
+    };
+
+    const skipSource = (resolution.source.id === resolution.target.id
+        && ['Invert', 'Banish'].includes(removeTier(event.skill)));
+
+    // Play Source Animation
+    if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
         if (!avatarAnimation.source) {
-            setAvatarAnimation({
-                source: true,
-                target: avatarAnimation.target,
-                id: resolution.id,
-                animTargetId: construct.id,
-                type: 'sourceCast',
-                params: { x, y },
-            });
+            setAvatarAnimation(true, avatarAnimation.target, resolution.id, construct.id, 'sourceCast', getDirection());
         }
     }
     const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
     if (!((resolution.target.id === construct.id)
         || (resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id)))) return false;
 
-    // target animation
+    // Play Target animation
     const anim = text => {
         if (!text || !resolution.sequence[0].includes('END_SKILL')) return false;
         const skill = removeTier(text);
 
         switch (skill) {
         // Attack base
-        case 'Attack': return <Strike colour={colours.white}/>;
+        case 'Attack': return <Strike colour={'#f5f5f5'} direction={getDirection()}/>;
         case 'Blast': return <Blast />;
         case 'Siphon': return <Siphon />;
         case 'SiphonTick': return <SiphonTick />;
-        case 'Strike': return <Strike colour={colours.red} id={resolution.id}/>;
+        case 'Strike': return <Strike colour={'#a52a2a'} direction={getDirection()}/>;
         case 'Chaos': return <Chaos />;
         case 'Slay': return <Slay />;
         case 'Heal': return <Heal />;
@@ -145,13 +119,7 @@ function animations(props) {
         case 'DecayTick': return <Decay />;
         case 'Invert': {
             if (!avatarAnimation.target) {
-                setAvatarAnimation({
-                    source: avatarAnimation.source,
-                    target: true,
-                    id: resolution.id,
-                    animTargetId: construct.id,
-                    type: 'invert',
-                });
+                setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'invert', null);
             } break;
         }
         case 'Purge': return <Purge />;
@@ -162,13 +130,7 @@ function animations(props) {
         case 'Stun': return <Stun />;
         case 'Banish': {
             if (!avatarAnimation.target) {
-                setAvatarAnimation({
-                    source: avatarAnimation.source,
-                    target: true,
-                    id: resolution.id,
-                    animTargetId: construct.id,
-                    type: 'banish',
-                });
+                setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'banish', null);
             } break;
         }
         case 'Bash': return <Bash />;
@@ -190,6 +152,7 @@ function animations(props) {
 
         default: return false;
         }
+        return false;
     };
 
     const combatAnim = anim(event.skill);
diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index dfb91861..c62e04c6 100644
--- a/client/src/components/game.construct.jsx
+++ b/client/src/components/game.construct.jsx
@@ -46,8 +46,8 @@ const addState = connect(
     },
 
     function receiveDispatch(dispatch) {
-        function setAvatarAnimation(c) {
-            return dispatch(actions.setAvatarAnimation(c));
+        function setAvatarAnimation(source, target, id, animTargetId, type, params) {
+            return dispatch(actions.setAvatarAnimation({ source, target, id, animTargetId, type, params }));
         }
 
         return {