Bug fixes and performance improvements

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "react-animated-menus",
-    "version": "1.0.0",
+    "version": "1.0.4",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

src/components/Menu.js

@@ -71,8 +71,7 @@ class App extends Component {
 
     //Targets that will be triggered
     var targetDots = document.querySelectorAll('#'+id+' .Menu_dot');
-    var targetElement = document.querySelectorAll('#'+id+' .Menu_element');
+    var targetButton = document.querySelectorAll('#'+id+' .Menu_button');
-    var targetElements = document.querySelector('#'+id+' .Menu_elements');
     var targetMenu = document.querySelector('#'+id+'.Menu');
 
 
@@ -80,8 +79,10 @@ class App extends Component {
     if(this.state.open) {
       var animation = anime.timeline();
 
-      //Display elements
+      //Display buttons
-      targetElements.style.display = "block";
+      targetButton.forEach((element) => {
+        element.style.display = "block";
+      });
 
       //Remove hover effect
       targetMenu.classList.remove("Menu_closed");
@@ -89,23 +90,31 @@ class App extends Component {
       animation
         .add({
           targets: targetDots,
-          scaleX: 9,
+          translateX: ["-44.5%","0%"],
-          scaleY: 10,
+          translateY: function(targetElements, i, l) {
-          borderRadius: 0,
+            if(i===0) return ["-44%","0%"];
-          duration: 1300,
+            if(i===1) return ["-44%","79%"];
-          translateY: "40%",
+            if(i===2) return ["-44%","157%"];
-          backgroundColor: "rgb(255, 255, 255)",
+          },
-          easing: 'easeOutExpo'
+          scaleX: [0.1,1],
+          scaleY: [0.14,1],
+          borderRadius: {
+            value: 0,
+            easing: "easeOutCubic",
+            duration: 1000
+          },
+          duration: 2000,
+          backgroundColor: "rgb(255, 255, 255)"
         })
         .add({
-          targets: targetElement,
+          targets: targetButton,
-          scaleX: [2,1],
+          scaleX: [2.5,1],
           opacity: 1,
           duration: function(targetElements, i, l) {
-            return 500 + (i * 200);
+            return 400 + (i * 200);
           },
-          easing: 'easeInOutQuart',
+          easing: 'easeOutCubic',
-          offset: '-=1100'
+          offset: '-=1700'
         });
     } else {
       animation = anime.timeline();
@@ -116,29 +125,36 @@ class App extends Component {
 
       animation
         .add({
-          targets: targetElement,
+          targets: targetButton,
-          scaleX: [1,2],
+          scaleX: [1,2.5],
-          opacity: 0,
           duration: function(targetElements, i, l) {
-            return 500 + (i * 200);
+            return 400 + (i * 200);
           },
-          easing: 'easeInOutQuart'
+          opacity: 0,
+          easing: 'easeInOutCubic'
         })
         .add({
           targets: targetDots,
-          scaleX: 1,
+          translateX: ["0%","-44.5%"],
-          scaleY: 1,
+          translateY: function(targetElements, i, l) {
+            if(i===0) return ["0%","-44%"];
+            if(i===1) return ["79%","-44%"];
+            if(i===2) return ["157%","-44%"];
+          },
+          scaleX: [1,0.1],
+          scaleY: [1,0.14],
           borderRadius: "100%",
-          duration: 1300,
+          duration: 1000,
-          translateY: 0,
+          backgroundColor: this.getColor(),
-          backgroundColor: color,
+          easing: "easeInOutCubic",
-          easing: 'easeOutExpo',
           offset: '-=500'
         });
 
         //Remove menu after animation finished
         animation.complete = function() {
-          targetElements.style.display = "none";
+          targetButton.forEach((element) => {
+            element.style.display = "none";
+          });
         };
     }
   }
@@ -211,38 +227,32 @@ class App extends Component {
       backgroundColor: this.getColor()
     };
 
+    const styleFont = {fontSize: style.width};
+
     return (
       <div style={style} id={this.state.id} className="Menu Menu_closed">
-        <div className="Menu_dots">
           <div className="Menu_dotBox">
-            <div style={styleDot} className="Menu_dot">
+            <div style={styleDot} className="Menu_dot Menu_dotA">
-
+              <div className="Menu_button" style={styleFont} onClick={this.props.food.a.action}>
-            </div>
-          </div>
-          <div className="Menu_dotBox">
-            <div style={styleDot} className="Menu_dot">
-
-            </div>
-          </div>
-          <div className="Menu_dotBox">
-            <div style={styleDot} className="Menu_dot">
-
-            </div>
-          </div>
-        </div>
-
-        <div className="Menu_elements">
-          <div className="Menu_button Menu_element" onClick={this.props.food.a.action}>
                 {this.props.food.a.value}
               </div>
-          <div className="Menu_button Menu_element" onClick={this.props.food.b.action}>
+            </div>
+          </div>
+          <div className="Menu_dotBox">
+            <div style={styleDot} className="Menu_dot Menu_dotB">
+              <div className="Menu_button" style={styleFont} onClick={this.props.food.b.action}>
                 {this.props.food.b.value}
               </div>
-          <div className="Menu_button Menu_element" onClick={this.props.food.c.action}>
+            </div>
+          </div>
+          <div className="Menu_dotBox">
+            <div style={styleDot} className="Menu_dot Menu_dotC">
+              <div className="Menu_button" style={styleFont} onClick={this.props.food.c.action}>
                 {this.props.food.c.value}
               </div>
             </div>
           </div>
+      </div>
     );
   }
 }

src/styles/Menu.css

@@ -3,7 +3,6 @@
   background-color: transparent;
   overflow: visible;
   transition: opacity 0.5s;
-  border-radius: 20%;
   cursor: pointer;
 }
 
@@ -11,61 +10,60 @@
   opacity: 0.7;
 }
 
-.Menu_dots {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-
 .Menu_dotBox {
   position: relative;
   width: 100%;
-  height: 33.33%;
+  height: 33.3333%;
   background-color: transparent;
 }
 
 .Menu_dot {
   position: absolute;
-  width: 70%;
+  width: 600%;
-  height: 70%;
+  height: 500%;
   border-radius: 100%;
   top: 15%;
   left: 15%;
   transition: opacity 0.4s;
 }
 
+/*.Menu_dotA {
+  transform: translateY(0%) scale(1,1);
+}
+.Menu_dotB {
+  transform: translateY(79%) scale(1,1);
+}
+.Menu_dotC {
+  transform: translateY(157%) scale(1,1);
+}*/
+.Menu_dotA {
+  transform: translate(-44.5%, -44%) scale(0.1,0.14);
+}
+.Menu_dotB {
+  transform: translate(-44.5%, -44%) scale(0.1,0.14);
+}
+.Menu_dotC {
+  transform: translate(-44.5%, -44%) scale(0.1,0.14);
+}
+
 .Menu:hover .Menu_dot {
   opacity: 1;
 }
 
-.Menu_elements {
-  position: absolute;
-  top: -6.5%;
-  left: -265%;
-  width: 644%;
-  height: 306%;
-  background-color: transparent;
-  display: none;
-  overflow: visible;
-}
-
-.Menu_element {
-  position: relative;
-  width: 100%;
-  height: 33.33%;
-  font-size: 0.8em;
-  text-align: center;
-  padding-top: 15%;
-  box-sizing: border-box;
-}
-
 .Menu_button {
+  position: relative;
+  display: none;
   width: 100%;
+  height: 100%;
+  text-align: center;
+  text-align: center;
+  box-sizing: border-box;
   background-color: white;
   transition: background-color 0.5s, padding 0.5s;
   opacity: 0;
+  z-index: 1;
+  padding-top: 25%;
+  color: rgb(60, 60, 60);
 }
 .Menu_button:hover {
   background-color: rgb(227, 227, 227);
@@ -74,5 +72,4 @@
 .Menu_button:active {
   transition: background-color 0.1s;
   background-color: rgb(207, 207, 207);
-  padding-left: 5%;
 }