diff --git a/client/src/components/anims/banish.jsx b/client/src/components/anims/banish.jsx
index 62d3096a..12ae365a 100644
--- a/client/src/components/anims/banish.jsx
+++ b/client/src/components/anims/banish.jsx
@@ -2,7 +2,7 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-function Banish(id) {
+function Banish(id, idle) {
     return anime({
         targets: [document.getElementById(id)],
         scaleY: 0,
@@ -11,6 +11,8 @@ function Banish(id) {
         delay: TIMES.TARGET_DELAY_MS,
         duration: TIMES.TARGET_DURATION_MS * 0.45,
         direction: 'alternate',
+        begin: idle.pause,
+        complete: idle.play,
     });
 }
 
diff --git a/client/src/components/anims/invert.jsx b/client/src/components/anims/invert.jsx
index 57a787d8..ac083bea 100644
--- a/client/src/components/anims/invert.jsx
+++ b/client/src/components/anims/invert.jsx
@@ -2,7 +2,7 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-function Invert(id) {
+function Invert(id, idle) {
     return anime({
         targets: [document.getElementById(id)],
         rotate: 180,
@@ -10,6 +10,8 @@ function Invert(id) {
         duration: TIMES.TARGET_DURATION_MS * 0.45,
         easing: 'easeInOutElastic',
         direction: 'alternate',
+        begin: idle.pause,
+        complete: idle.play,
     });
 }
 
diff --git a/client/src/components/anims/source.cast.jsx b/client/src/components/anims/source.cast.jsx
index 25cb8ae8..74a17184 100644
--- a/client/src/components/anims/source.cast.jsx
+++ b/client/src/components/anims/source.cast.jsx
@@ -2,15 +2,17 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-function sourceCast(id, direction) {
+function sourceCast(id, direction, idle) {
     const { x, y } = direction;
     return anime({
         targets: [document.getElementById(id)],
-        translateX: [0, x * 200],
-        translateY: [0, y * 200],
+        translateX: x * window.screen.width * 0.15,
+        translateY: y * window.screen.height * 0.15,
         easing: 'easeInOutElastic',
         direction: 'alternate',
         duration: TIMES.SOURCE_DURATION_MS,
+        begin: idle.pause,
+        complete: idle.play,
     });
 }
 
diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx
index 17e97349..964da49c 100644
--- a/client/src/components/construct.jsx
+++ b/client/src/components/construct.jsx
@@ -37,73 +37,8 @@ class ConstructAvatar extends Component {
     }
 
     componentDidMount() {
-        const { animSource, animTarget, construct } = this.props;
-
-        // back to idle
-        if (!animTarget && !animSource) {
-            if (!this.idle) {
-                this.idle = idleAnimation(this.props.construct.id);
-                return this.animations.push(this.idle);
-            }
-
-            return this.idle.play();
-        }
-
-        const isSource = animSource && animSource.constructId === construct.id;
-
-        const selectAnim = () => {
-            if (isSource) {
-                console.warn(construct.name, animSource);
-                return sourceCast(animSource.constructId, animSource.direction);
-            }
-
-            switch (animTarget.skill) {
-            case 'banish': return banish(construct.id);
-            case 'invert': return invert(construct.id);
-            default: return null;
-            }
-        };
-
-        const anim = selectAnim();
-        if (!anim) return false;
-
-        this.idle.pause();
-        this.animations.push(anim);
-        return true;
-    }
-
-    componentDidUpdate(prevProps) {
-        const { animSource, animTarget, construct } = this.props;
-
-        // back to idle
-        if (!animTarget && !animSource) {
-            if (!this.idle) {
-                this.idle = idleAnimation(this.props.construct.id);
-                return this.animations.push(this.idle);
-            }
-            return this.idle.play();
-        }
-
-        const isSource = animSource && animSource.constructId === construct.id;
-
-        const selectAnim = () => {
-            if (isSource) {
-                return sourceCast(animSource.constructId, animSource.direction);
-            }
-
-            switch (animTarget.skill) {
-            case 'Banish': return banish(construct.id);
-            case 'Invert': return invert(construct.id);
-            default: return null;
-            }
-        };
-
-        const anim = selectAnim();
-        if (!anim) return false;
-
-        this.idle.pause();
-        this.animations.push(anim);
-        return true;
+        this.idle = idleAnimation(this.props.construct.id);
+        return this.animations.push(this.idle);
     }
 
     resetAnimations() {
@@ -132,24 +67,19 @@ class ConstructAvatar extends Component {
         // this is the source
         if (animSource && animSource.constructId === construct.id) {
             // console.warn(construct.name, 'should update')
-            return true;
+            return sourceCast(animSource.constructId, animSource.direction, this.idle);
         }
 
         // this is the target
         if (animTarget && animTarget.constructId.includes(construct.id)) {
             // console.warn(construct.name, 'should update')
-            return true;
+            switch (animTarget.skill) {
+            case 'Banish': return banish(construct.id, this.idle);
+            case 'Invert': return invert(construct.id, this.idle);
+            default: return null;
+            }
         }
 
-        // 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.includes(construct.id);
-        if (prevTarget && !animTarget) return true;
-
-        // console.warn(construct.name, 'not updating');
-
         return false;
     }
 }