screen width % for anims

client/src/components/anims/chaos.jsx

@@ -69,10 +69,9 @@ class Chaos extends Component {
                 stroke: colour,
             });
         });
-
         anime.set('.skill-anim', {
-            translateY: -300 * this.props.direction.y,
-            translateX: -200 * this.props.direction.x,
+            translateY: -(window.screen.height) * 0.35 * this.props.direction.y,
+            translateX: -(window.screen.width) * 0.15 * this.props.direction.x,
             opacity: 0,
         });
         anime.set('#explosion feDisplacementMap', {

client/src/components/anims/siphon.jsx

@@ -71,7 +71,6 @@ class Siphon extends Component {
         }
         this.props.animCb();
     }
-
 }
 
 module.exports = addState(Siphon);

client/src/components/anims/slay.jsx

@@ -91,7 +91,7 @@ class Slay extends Component {
         });
 
         anime.set('#slay', {
-            translateY: -400,
+            translateY: (window.screen.height) * 0.35 * this.props.direction.y,
             translateX: 0,
         });
         anime.set('#explosion feDisplacementMap', {

client/src/components/anims/strike.jsx

@@ -85,7 +85,7 @@ class Strike extends Component {
         });
 
         anime.set('#strike', {
-            translateY: -400,
+            translateY: (window.screen.height) * 0.35 * this.props.direction.y,
             translateX: 0,
         });