diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index f0935718..f4898539 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -185,7 +185,7 @@
 
 .game-construct.ko {
     animation: none;
-    opacity: 0.35;
+    opacity: 0.20;
 /*    filter: grayscale(100%);
 */}
 
@@ -199,6 +199,7 @@
 */}
 
 .game-construct.unfocus.ko {
+    opacity: 0.20;
 /*    filter: blur(5px) grayscale(100%);
 */}
 
diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx
index 231a54b6..a7213957 100644
--- a/client/src/animations.socket.jsx
+++ b/client/src/animations.socket.jsx
@@ -32,30 +32,46 @@ function createSocket(store) {
         return eachSeries(newRes, (r, cb) => {
             if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
 
+            store.dispatch(actions.setResolution(r));
+
             // convert server enum into anims keywords
             // todo make serersideonly
             const sequence = animations.getSequence(r);
             const timeout = animations.getTime(sequence);
             const anims = animations.getObjects(r, sequence, game, account);
+            const text = animations.getText(r, sequence);
 
-            store.dispatch(actions.setAnimSource(anims.animSource));
-            store.dispatch(actions.setAnimTarget(anims.animTarget));
+            if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
+            if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget));
+            if (sequence.includes('POST_SKILL')) {
+                // timeout to prevent text classes from being added too soon
+                setTimeout(
+                    () => store.dispatch(actions.setAnimText(text)),
+                    timeout - 1000,
+                );
+            }
 
             return setTimeout(() => {
                 store.dispatch(actions.setAnimSource(null));
                 store.dispatch(actions.setAnimTarget(null));
+                store.dispatch(actions.setAnimText(null));
                 return setTimeout(cb, 50);
-            }, 3000);
+            }, timeout);
+
         }, err => {
             if (err) return console.error(err);
+            // clear animation state
             store.dispatch(actions.setAnimSource(null));
             store.dispatch(actions.setAnimTarget(null));
+            store.dispatch(actions.setAnimText(null));
             store.dispatch(actions.setAnimating(false));
 
-            // stop skipping resolutions
             store.dispatch(actions.setSkip(false));
+            store.dispatch(actions.setResolution(null));
 
-            // ws.sendGameState(currentGame.id);
+            // set the game state so resolutions don't fire twice
+            store.dispatch(actions.setGame(game));
+            ws.sendGameState(game.id);
             return true;
         });
     }
diff --git a/client/src/components/anims/hybrid.jsx b/client/src/components/anims/hybrid.jsx
index 5b0bce31..ddcb8a9e 100644
--- a/client/src/components/anims/hybrid.jsx
+++ b/client/src/components/anims/hybrid.jsx
@@ -33,7 +33,7 @@ class Hybrid extends Component {
                         class="green-one"
                         cx='50'
                         cy='150'
-                        r='10'
+                        r="15"
                         fill={COLOURS.GREEN}
                         stroke="none"
                     />
@@ -41,7 +41,7 @@ class Hybrid extends Component {
                         class="green-two"
                         cx='250'
                         cy='150'
-                        r='10'
+                        r="15"
                         fill={COLOURS.GREEN}
                         stroke="none"
                     />
@@ -49,7 +49,7 @@ class Hybrid extends Component {
                         class="bluewhite-one"
                         cx='150'
                         cy='50'
-                        r='10'
+                        r="15"
                         fill={COLOURS.BLUE}
                         stroke="none"
                     />
@@ -65,7 +65,7 @@ class Hybrid extends Component {
                         class="bluewhite-two"
                         cx='150'
                         cy='250'
-                        r='10'
+                        r="15"
                         fill={COLOURS.BLUE}
                         stroke="none"
                     />
@@ -77,7 +77,6 @@ class Hybrid extends Component {
                         fill={COLOURS.WHITE}
                         stroke="none"
                     />
-
                 </g>
             </svg>
         );
@@ -100,6 +99,7 @@ class Hybrid extends Component {
         }));
 
         this.animations.push(anime({
+            r: [10, anime.random(10, 30)],
             targets: ['#hybrid circle.green-one'],
             cx: [50, 250, 50, 250],
             delay: TIMES.TARGET_DELAY_MS,
@@ -109,6 +109,7 @@ class Hybrid extends Component {
         }));
 
         this.animations.push(anime({
+            r: [10, anime.random(10, 30)],
             targets: ['#hybrid circle.green-two'],
             cy: [250, 50, 250, 50],
             delay: TIMES.TARGET_DELAY_MS,
@@ -118,6 +119,7 @@ class Hybrid extends Component {
         }));
 
         this.animations.push(anime({
+            r: [10, anime.random(10, 30)],
             targets: ['#hybrid circle.bluewhite-one'],
             fill: [COLOURS.WHITE, COLOURS.BLUE],
             cy: [50, 250, 50, 250],
@@ -128,6 +130,7 @@ class Hybrid extends Component {
         }));
 
         this.animations.push(anime({
+            r: [10, anime.random(10, 30)],
             targets: ['#hybrid circle.bluewhite-two'],
             cx: [250, 50, 250, 50],
             fill: [COLOURS.WHITE, COLOURS.BLUE],
diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx
index 6eb08e69..7c3306c1 100644
--- a/client/src/components/construct.jsx
+++ b/client/src/components/construct.jsx
@@ -88,8 +88,8 @@ class ConstructAvatar extends Component {
             }
 
             switch (animTarget.skill) {
-            case 'banish': return banish(construct.id);
-            case 'invert': return invert(construct.id);
+            case 'Banish': return banish(construct.id);
+            case 'Invert': return invert(construct.id);
             default: return null;
             }
         };
@@ -112,8 +112,8 @@ class ConstructAvatar extends Component {
         this.resetAnimations();
     }
 
-    shouldComponentUpdate({ animSource, construct }) {
-        if (animSource === this.props.animSource) {
+    shouldComponentUpdate({ animSource, animTarget, construct }) {
+        if (animSource === this.props.animSource && animTarget === this.props.animTarget) {
             // console.warn(construct.name, 'thinks its same props')
             return false;
         }
@@ -128,12 +128,18 @@ class ConstructAvatar extends Component {
         }
 
         // this is the target
-        // if (animTarget && animTarget.constructId === construct.id) return true;
+        if (animTarget && animTarget.constructId === construct.id) {
+            // console.warn(construct.name, 'should update')
+            return true;
+        }
 
         // we were previously doing src anim
         const prevSrc = this.props.animSource && this.props.animSource.constructId === construct.id;
         if (prevSrc && !animSource) return true;
 
+        const prevTarget = this.props.animTarget && this.props.animTarget.constructId === construct.id;
+        if (prevTarget && !animTarget) return true;
+
         // console.warn(construct.name, 'not updating');
 
         return false;