Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<!-- Uses AnimateAnythingJS library for animation styles: https://github.com/matthewmain/AnimateAnythingJS -->

<div id="container">
  
  <div id="b1" class="box">
    <svg id="i1" class="icon" viewBox="0 0 100 100">
      <path id="top-line-1"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-1" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-1" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
  <div id="b2" class="box">
    <svg id="i2" class="icon" viewBox="0 0 100 100">
      <path id="top-line-2"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-2" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-2" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
  <div id="b3" class="box">
    <svg id="i3" class="icon" viewBox="0 0 100 100">
      <path id="top-line-3"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-3" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-3" 	d="M30,63 L70,63 Z"></path>
    </svg>  
  </div>
  
  <div id="b4" class="box">
    <svg id="i4" class="icon" viewBox="0 0 100 100">
      <polyline id="top-line-4" points="30 37 50 37 70 37"></polyline>
      <path id="middle-line-4" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-4" 	d="M30,63 L70,63 Z"></path>
    </svg>  
  </div>
  
  <div id="b5" class="box">
    <svg id="i5" class="icon" viewBox="0 0 100 100">
      <path id="top-line-5"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-5" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-5" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
  <div id="b6" class="box">
    <svg id="i6" class="icon" viewBox="0 0 100 100">
      <path id="top-line-6"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-6" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-6" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
</div>

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/animateAnything.js"></script>
            
          
!
            
              
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.box {
  width: 33.3333%;
  height: 50%;
  float: left;
}

.icon {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	width: 100%; 
  height: 100%;
	fill: none;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
  cursor: pointer;
}



/******** PALETTES ********/


/*** Faint Grays ***/

/* #b1 { background: #FFFFFF; }
#b2 { background: #F8F8F8; }
#b3 { background: #EFEFEF; }
#b4 { background: #E8E8E8; }
#b5 { background: #DFDFDF; }
#b6 { background: #D8D8D8; }
.icon { stroke: #000000; opacity: .65; } */


/*** Peach ***/

#b1 { background: #fc5c65; }
#b2 { background: #fd9644; }
#b3 { background: #fed330; }
#b4 { background: #eb3b5a; }
#b5 { background: #fa8231; }
#b6 { background: #f7b731; }
.icon { stroke: #FFFFFF; opacity: .95; }


/*** Lime ***/

/* #b1 { background: #76F5A7; }
#b2 { background: #93E87B; }
#b3 { background: #DFE87B; }
#b4 { background: #87FF94; }
#b5 { background: #D1FF93; }
#b6 { background: #FFF687; }
.icon { stroke: #FFFFFF; opacity: 1; } */


/*** Rainbow & Whites ***/

/* #b1 { background: #f1c40f; }
#b2 { background: #1fe0ba; }
#b3 { background: #3ebb2a; }
#b4 { background: #2980b9; }
#b5 { background: #e74c3c; }
#b6 { background: #8e44ad; }
.icon { stroke: #FFFFFF; opacity: .9; } */


/*** Rainbow & Darks ***/

/* #b1 { background: #f1c40f; }
#b2 { background: #1fe0ba; }
#b3 { background: #3ebb2a; }
#b4 { background: #2980b9; }
#b5 { background: #e74c3c; }
#b6 { background: #8e44ad; }
.icon { stroke: #000000; opacity: .5; } */

            
          
!
            
              

/////////////////////////////////////////////////////
/////////////////////  ICON 1  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_1 = document.getElementById("b1");
var topLine_1 = document.getElementById("top-line-1");
var middleLine_1 = document.getElementById("middle-line-1");
var bottomLine_1 = document.getElementById("bottom-line-1");
var state_1 = "menu";  // can be "menu" or "arrow"
var topLineY_1;
var middleLineY_1;
var bottomLineY_1;
var topLeftY_1;
var topRightY_1;
var bottomLeftY_1;
var bottomRightY_1;
var topLeftX_1;
var topRightX_1;
var bottomLeftX_1;
var bottomRightX_1;

///Animation Variables
var segmentDuration_1 = 15;
var menuDisappearDurationInFrames_1 = segmentDuration_1;
var arrowAppearDurationInFrames_1 = segmentDuration_1;
var arrowDisappearDurationInFrames_1 = segmentDuration_1;
var menuAppearDurationInFrames_1 = segmentDuration_1;
var menuDisappearComplete_1 = false;
var arrowAppearComplete_1 = false;
var arrowDisappearComplete_1 = false;
var menuAppearComplete_1 = false;
var currentFrame_1 = 1;

///Menu Disappear 
function menuDisappearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= menuDisappearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLineY_1 = AJS.easeInBack( 37, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
			//bottom line
			bottomLineY_1 = AJS.easeInBack( 63, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
			//recursion
			menuDisappearAnimation_1();
		});
	} else {
		middleLine_1.style.opacity = "0";
		currentFrame_1 = 1;
		menuDisappearComplete_1 = true;
		openMenuAnimation_1();
	}
}

///Cross Appear
function arrowAppearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= arrowAppearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			topLeftY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomRightY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
			//bottom line
			bottomLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomLeftY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			topRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			topRightY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
			//recursion
			arrowAppearAnimation_1();
		});
	} else {
		currentFrame_1 = 1;
		arrowAppearComplete_1 = true;
		openMenuAnimation_1();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_1() {
	if ( !menuDisappearComplete_1 ) { 
		menuDisappearAnimation_1();
	} else if ( !arrowAppearComplete_1) {
		arrowAppearAnimation_1();
	}
}

///Cross Disappear
function arrowDisappearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= arrowDisappearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> {
			//top line
			topLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topLeftY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomRightY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
			//bottom line
			bottomLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomLeftY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topRightY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
			//recursion
			arrowDisappearAnimation_1();
		});
	} else {
		middleLine_1.style.opacity = "1";
		currentFrame_1 = 1;
		arrowDisappearComplete_1 = true;
		closeMenuAnimation_1();
	}
}

///Menu Appear
function menuAppearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= menuAppearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> {
			//top line
			topLineY_1 = AJS.easeOutBack( 50, 37, menuDisappearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
			//bottom line
			bottomLineY_1 = AJS.easeOutBack( 50, 63, menuDisappearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
			//recursion
			menuAppearAnimation_1();
		});
	} else {
		currentFrame_1 = 1;
		menuAppearComplete_1 = true;
		closeMenuAnimation_1();
	}
}

///Close Menu Animation
function closeMenuAnimation_1() {
	if ( !arrowDisappearComplete_1 ) {
		arrowDisappearAnimation_1();
	} else if ( !menuAppearComplete_1 ) {
		menuAppearAnimation_1();
	}
}

///Events
icon_1.addEventListener( "click", ()=> { 
  if ( state_1 === "menu" ) {
  	openMenuAnimation_1();
  	state_1 = "arrow";
  	arrowDisappearComplete_1 = false;
		menuAppearComplete_1 = false;
  } else if ( state_1 === "arrow" ) {
  	closeMenuAnimation_1();
  	state_1 = "menu";
  	menuDisappearComplete_1 = false;
		arrowAppearComplete_1 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 2  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_2 = document.getElementById("b2");
var topLine_2 = document.getElementById("top-line-2");
var middleLine_2 = document.getElementById("middle-line-2");
var bottomLine_2 = document.getElementById("bottom-line-2");
var state_2 = "menu";  // can be "menu" or "cross"
var topLineY_2;
var middleLineY_2;
var bottomLineY_2;
var topLeftY_2;
var topRightY_2;
var bottomLeftY_2;
var bottomRightY_2;
var topLeftX_2;
var topRightX_2;
var middleLeftX_2;
var middleRightX_2;
var bottomLeftX_2;
var bottomRightX_2;

///Animation Variables
var segmentDuration_2 = 25;
var menuDisappearDurationInFrames_2 = segmentDuration_2;
var crossAppearDurationInFrames_2 = Math.round( segmentDuration_2*0.35 );
var crossDisappearDurationInFrames_2 = Math.round( segmentDuration_2*0.6 );
var menuAppearDurationInFrames_2 = segmentDuration_2;
var menuDisappearComplete_2 = false;
var crossAppearComplete_2 = false;
var crossDisappearComplete_2 = true;
var menuAppearComplete_2 = true;
var currentFrame_2 = 0;
var lineDisappearDelay_2 = segmentDuration_2*0.2;
var lineAppearDelay_2 = lineDisappearDelay_2;
var lineDisappearDurationInFrames_2 = segmentDuration_2 - lineDisappearDelay_2*2;
var lineAppearDurationInFrames_2 = lineDisappearDurationInFrames_2;
var topLineOpacity_2 = 1;
var middleLineOpacity_2 = 1;
var bottomLineOpacity_2 = 1;

///Menu Disappear
function menuDisappearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= menuDisappearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
      if ( currentFrame_2 <= lineDisappearDurationInFrames_2 ) {
        topLeftX_2 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_2, currentFrame_2 );
        topRightX_2 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_2, currentFrame_2 );
        topLine_2.setAttribute( "d", "M"+topLeftX_2+",37 L"+topRightX_2+",37 Z" );
        topLineOpacity_2 = AJS.linear( 1, 0, lineDisappearDurationInFrames_2*0.85, currentFrame_2 );
        topLine_2.style.opacity = topLineOpacity_2;
      }
      //middle line
      if ( currentFrame_2 > lineDisappearDelay_2 && currentFrame_2 <= lineDisappearDurationInFrames_2 + lineDisappearDelay_2 ) {
        middleLeftX_2 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2 );
        middleRightX_2 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2 );
        middleLine_2.setAttribute( "d", "M"+middleLeftX_2+",50 L"+middleRightX_2+",50 Z" );
        middleLineOpacity_2 = AJS.linear( 1, 0, lineDisappearDurationInFrames_2*0.85, currentFrame_2 - lineDisappearDelay_2 );
        middleLine_2.style.opacity = middleLineOpacity_2;
      }
      //bottom line
      if ( currentFrame_2 > lineDisappearDelay_2*2 ) {
        bottomLeftX_2 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2*2 );
        bottomRightX_2 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2*2 );
        bottomLine_2.setAttribute( "d", "M"+bottomLeftX_2+",63 L"+bottomRightX_2+",63 Z" );
        bottomLineOpacity_2 = AJS.linear( 1, 0, lineDisappearDurationInFrames_2*0.85, currentFrame_2 - lineDisappearDelay_2*2 );
        bottomLine_2.style.opacity = bottomLineOpacity_2;
      }
			//recursion
			menuDisappearAnimation_2();
		});
	} else {
		currentFrame_2 = 0;
		menuDisappearComplete_2 = true;
		openMenuAnimation_2();
	}
}

///Cross Appear
function crossAppearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= crossAppearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLeftX_2 = AJS.easeInQuad( -30, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			topLeftY_2 = AJS.easeInQuad( -30, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomRightX_2 = AJS.easeInQuad( 0, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomRightY_2 = AJS.easeInQuad( 0, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			topLine_2.setAttribute( "d", "M" + topLeftX_2 + "," + topLeftY_2 + " L" + bottomRightX_2 + "," + bottomRightY_2 );
      topLineOpacity_2 = AJS.easeInExpo( 0, 1, crossAppearDurationInFrames_2, currentFrame_2 );
      topLine_2.style.opacity = topLineOpacity_2;
			//bottom line
			bottomLeftX_2 = AJS.easeInQuad( -30, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomLeftY_2 = AJS.easeInQuad( 130, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			topRightX_2 = AJS.easeInQuad( 0, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			topRightY_2 = AJS.easeInQuad( 100, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomLine_2.setAttribute( "d", "M" + bottomLeftX_2 + "," + bottomLeftY_2 + " L" + topRightX_2 + "," + topRightY_2 );
      bottomLineOpacity_2 = AJS.easeInExpo( 0, 1, crossAppearDurationInFrames_2, currentFrame_2 );
      bottomLine_2.style.opacity = bottomLineOpacity_2;      
			//recursion
			crossAppearAnimation_2();
		});
	} else {
		currentFrame_2 = 0;
		crossAppearComplete_2 = true;
		openMenuAnimation_2();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_2() {
	if ( !menuDisappearComplete_2 ) { 
		menuDisappearAnimation_2();
	} else if ( !crossAppearComplete_2) {
		crossAppearAnimation_2();
	}
}

///Cross Disappear
function crossDisappearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= crossDisappearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> {
      //top line
			topLeftX_2 = AJS.easeInBack( 35, -30, crossDisappearDurationInFrames_2, currentFrame_2 );
			topLeftY_2 = AJS.easeInBack( 35, -30, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomRightX_2 = AJS.easeInBack( 65, 0, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomRightY_2 = AJS.easeInBack( 65, 0, crossDisappearDurationInFrames_2, currentFrame_2 );
			topLine_2.setAttribute( "d", "M" + topLeftX_2 + "," + topLeftY_2 + " L" + bottomRightX_2 + "," + bottomRightY_2 );
      topLineOpacity_2 = AJS.linear( 1, 0, crossDisappearDurationInFrames_2, currentFrame_2, crossDisappearDurationInFrames_2*0.75 );
      topLine_2.style.opacity = topLineOpacity_2;
			//bottom line
			bottomLeftX_2 = AJS.easeInBack( 35, -30, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomLeftY_2 = AJS.easeInBack( 65, 130, crossDisappearDurationInFrames_2, currentFrame_2 );
			topRightX_2 = AJS.easeInBack( 65, 0, crossDisappearDurationInFrames_2, currentFrame_2 );
			topRightY_2 = AJS.easeInBack( 35, 100, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomLine_2.setAttribute( "d", "M" + bottomLeftX_2 + "," + bottomLeftY_2 + " L" + topRightX_2 + "," + topRightY_2 );
      bottomLineOpacity_2 = AJS.linear( 1, 0, crossDisappearDurationInFrames_2, currentFrame_2, crossDisappearDurationInFrames_2*0.75 );
      bottomLine_2.style.opacity = bottomLineOpacity_2;
			//recursion
			crossDisappearAnimation_2();
		});
	} else {
		middleLine_2.style.opacity = "1";
		currentFrame_2 = 0;
		crossDisappearComplete_2 = true;
		closeMenuAnimation_2();
	}
}

///Menu Appear
function menuAppearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= menuAppearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> {  
			//top line
      if ( currentFrame_2 <= lineAppearDurationInFrames_2 ) {
        topLeftX_2 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_2, currentFrame_2 );
        topRightX_2 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_2, currentFrame_2 );
        topLine_2.setAttribute( "d", "M"+topLeftX_2+",37 L"+topRightX_2+",37 Z" );
        topLineOpacity_2 = AJS.linear( -2, 1, lineAppearDurationInFrames_2, currentFrame_2 );
        topLine_2.style.opacity = topLineOpacity_2;
      }
			//middle line
			if ( currentFrame_2 > lineAppearDelay_2 && currentFrame_2 <= lineAppearDurationInFrames_2 + lineAppearDelay_2 ) {
        middleLeftX_2 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 );
        middleRightX_2 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 );
        middleLine_2.setAttribute( "d", "M"+middleLeftX_2+",50 L"+middleRightX_2+",50 Z" );
        middleLineOpacity_2 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 );
        middleLine_2.style.opacity = middleLineOpacity_2;
			}
			//bottom line
			if ( currentFrame_2 > lineAppearDelay_2*2 ) {
        bottomLeftX_2 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2*2 );
        bottomRightX_2 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2*2 );
        bottomLine_2.setAttribute( "d", "M"+bottomLeftX_2+",63 L"+bottomRightX_2+",63 Z" );
        bottomLineOpacity_2 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2*2 );
        bottomLine_2.style.opacity = bottomLineOpacity_2;
			}
			//recursion
			menuAppearAnimation_2();
		});
	} else {
		currentFrame_2 = 0;
		menuAppearComplete_2 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_2() {
	if ( !crossDisappearComplete_2 ) {
		crossDisappearAnimation_2();
	} else if ( !menuAppearComplete_2 ) {
		menuAppearAnimation_2();
	}
}

///Events
icon_2.addEventListener( "click", ()=> { 
  if ( state_2 === "menu" ) {
  	openMenuAnimation_2();
  	state_2 = "cross";
  	crossDisappearComplete_2 = false;
		menuAppearComplete_2 = false;
  } else if ( state_2 === "cross" ) {
  	closeMenuAnimation_2();
  	state_2 = "menu";
  	menuDisappearComplete_2 = false;
		crossAppearComplete_2 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 3  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_3 = document.getElementById("b3");
var topLine_3 = document.getElementById("top-line-3");
var middleLine_3 = document.getElementById("middle-line-3");
var bottomLine_3 = document.getElementById("bottom-line-3");
var state_3 = "menu";  // can be "menu" or "cross"
var topLineY_3;
var middleLineY_3;
var bottomLineY_3;
var topLeftX_3;
var topRightX_3;
var middleLeftX_3;
var middleRightX_3;
var bottomLeftX_3;
var bottomRightX_3;
var topLeftY_3;
var topRightY_3;
var middleLeftY_3;
var middleRightY_3;
var bottomLeftY_3;
var bottomRightY_3;

///Animation Variables
var segmentDuration_3 = 20;
var menuDisappearDurationInFrames_3 = segmentDuration_3;
var crossAppearDurationInFrames_3 = segmentDuration_3*1.5;
var crossDisappearDurationInFrames_3 = segmentDuration_3*1.5;
var menuAppearDurationInFrames_3 = segmentDuration_3;
var menuDisappearComplete_3 = false;
var crossAppearComplete_3 = false;
var crossDisappearComplete_3 = true;
var menuAppearComplete_3 = true;
var currentFrame_3 = 0;
var cPt_3 = { x: 50, y: 50 };  // center point
var tlPt_3 = { x: 30, y: 37 };  // top right point
var trPt_3 = { x: 70, y: 37 };  // top left point
var mlPt_3 = { x: 30, y: 50 };  // middle right point
var mrPt_3 = { x: 70, y: 50 };  // middle left point
var blPt_3 = { x: 30, y: 63 };  // bottom right point
var brPt_3 = { x: 70, y: 63 };  // bottom left point
var topLineOpacity_3 = 1;
var middleLineOpacity_3 = 1;
var bottomLineOpacity_3 = 1;

///Position Rotation
function positionRotation( centerPoint, orbitPoint, angleInRads ) {
  var distance = Math.sqrt( Math.pow( orbitPoint.x-centerPoint.x, 2 ) + Math.pow( orbitPoint.y-centerPoint.y, 2 ) );
  orbitPoint.x = centerPoint.x + Math.cos( angleInRads ) * distance;
  orbitPoint.y = centerPoint.y + Math.sin( angleInRads ) * distance;
}

///Menu Disappear
function menuDisappearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= menuDisappearDurationInFrames_3 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;
			//top line
      var tlAng = AJS.easeInBack( 3.7179, 3.7179+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var trAng = AJS.easeInBack( 5.7068, 5.7068+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, tlPt_3, tlAng );
      positionRotation( cPt_3, trPt_3, trAng );
      topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
      //middle line
      var mlAng = AJS.easeInBack( Math.PI, Math.PI+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeInBack( 0, rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      var blAng = AJS.easeInBack( 2.5652, 2.5652+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var brAng = AJS.easeInBack( 0.5763, 0.5763+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, blPt_3, blAng );
      positionRotation( cPt_3, brPt_3, brAng );
      bottomLine_3.setAttribute( "d", "M"+blPt_3.x+","+blPt_3.y+" L"+brPt_3.x+","+brPt_3.y+" Z" );
			//recursion
			menuDisappearAnimation_3();
		});
	} else {
		currentFrame_3 = 0;
		menuDisappearComplete_3 = true;
		openMenuAnimation_3();
	}
}

///Cross Appear
function crossAppearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= crossAppearDurationInFrames_3 ) {
    tlPt_3 = { x: 50, y: 28.7867 };
    trPt_3 = { x: 50, y: 71.2132 };
    mlPt_3 = { x: 28.7867, y: 50 };
    mrPt_3 = { x: 71.2132, y: 50 };
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.75;
			//top line
      var tlAng = AJS.easeOutBack( Math.PI, Math.PI+rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      var trAng = AJS.easeOutBack( 0, rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, tlPt_3, tlAng );
      positionRotation( cPt_3, trPt_3, trAng );
      topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
			//center line
      var mlAng = AJS.easeOutBack( Math.PI*1.5, Math.PI*1.5+rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeOutBack( Math.PI*0.5, Math.PI*0.5+rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      bottomLine_3.style.opacity = 0;
			//recursion
			crossAppearAnimation_3();
		});
	} else {
		currentFrame_3 = 0;
		crossAppearComplete_3 = true;
		openMenuAnimation_3();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_3() {
	if ( !menuDisappearComplete_3 ) { 
		menuDisappearAnimation_3();
	} else if ( !crossAppearComplete_3) {
		crossAppearAnimation_3();
	}
}

///Cross Disappear
function crossDisappearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= crossDisappearDurationInFrames_3 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.75;
			//top line
      var tlAng = AJS.easeInBack( Math.PI*1.75, Math.PI*1.75+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      var trAng = AJS.easeInBack( Math.PI*0.75, Math.PI*0.75+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, tlPt_3, tlAng );
      positionRotation( cPt_3, trPt_3, trAng );
      topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
			//center line
      var mlAng = AJS.easeInBack( Math.PI*2.25, Math.PI*2.25+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeInBack( Math.PI*1.25, Math.PI*1.25+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      bottomLine_3.style.opacity = 0;
			//recursion
			crossDisappearAnimation_3();
		});
	} else {
		middleLine_3.style.opacity = "1";
		currentFrame_3 = 0;
		crossDisappearComplete_3 = true;
		closeMenuAnimation_3();
	}
}

///Menu Appear
function menuAppearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= menuAppearDurationInFrames_3 ) {
    tlPt_3 = { x: 37, y: 70 };
    trPt_3 = { x: 37, y: 30 };
    mlPt_3 = { x: 50, y: 70 };
    mrPt_3 = { x: 50, y: 30 };
    bottomLine_3.style.opacity = 1;
		window.requestAnimationFrame( ()=> {  
      var rotation = Math.PI*0.5;
			//top line
			var tlAng = AJS.easeOutBack( 2.1471, 2.1471+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
			var trAng = AJS.easeOutBack( 4.1360, 4.1360+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
			positionRotation( cPt_3, tlPt_3, tlAng );
			positionRotation( cPt_3, trPt_3, trAng );
			topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
      //middle line
      var mlAng = AJS.easeOutBack( Math.PI*0.5, Math.PI*0.5+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeOutBack( Math.PI*1.5, Math.PI*1.5+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      var blAng = AJS.easeOutBack( 0.9944, 0.9944+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var brAng = AJS.easeOutBack( 5.2887, 5.2887+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, blPt_3, blAng );
      positionRotation( cPt_3, brPt_3, brAng );
      bottomLine_3.setAttribute( "d", "M"+blPt_3.x+","+blPt_3.y+" L"+brPt_3.x+","+brPt_3.y+" Z" );
			//recursion
			menuAppearAnimation_3();
		});
	} else {
		currentFrame_3 = 0;
		menuAppearComplete_3 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_3() {
	if ( !crossDisappearComplete_3 ) {
		crossDisappearAnimation_3();
	} else if ( !menuAppearComplete_3 ) {
		menuAppearAnimation_3();
	}
}

///Events
icon_3.addEventListener( "click", ()=> { 
  if ( state_3 === "menu" ) {
  	openMenuAnimation_3();
  	state_3 = "cross";
  	crossDisappearComplete_3 = false;
		menuAppearComplete_3 = false;
  } else if ( state_3 === "cross" ) {
  	closeMenuAnimation_3();
  	state_3 = "menu";
  	menuDisappearComplete_3 = false;
		crossAppearComplete_3 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 4  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_4 = document.getElementById("b4");
var topLine_4 = document.getElementById("top-line-4");
var middleLine_4 = document.getElementById("middle-line-4");
var bottomLine_4 = document.getElementById("bottom-line-4");
var state_4 = "menu";  // can be "menu" or "arrow"
var topLineY_4;
var middleLineY_4;
var bottomLineY_4;
var arrowLegY_4;
var arrowPointY_4;
var hideawayLinesOpacity_4;

///Animation Variables
var segmentDuration_4 = 25;
var menuDisappearDurationInFrames_4 = segmentDuration_4;
var arrowAppearDurationInFrames_4 = segmentDuration_4;
var menuAppearDurationInFrames_4 = segmentDuration_4*1.5;
var fadeInDurationInFrames_4 = segmentDuration_4;
var menuDisappearComplete_4 = false;
var arrowAppearComplete_4 = false;
var menuAppearComplete_4 = true;
var currentFrame_4 = 1;

///Collapse
function menuDisappearAnimation_4() {
	currentFrame_4++;
	if ( currentFrame_4 <= menuDisappearDurationInFrames_4 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLineY_4 = AJS.easeInOutBack( 37, 63, menuDisappearDurationInFrames_4, currentFrame_4 );
			topLine_4.setAttribute( "points", "30 "+topLineY_4+" 50 "+topLineY_4+" 70 "+topLineY_4 );
			//middle line
			middleLineY_4 = AJS.easeInOutBack( 50, 63, menuDisappearDurationInFrames_4, currentFrame_4 );
			middleLine_4.setAttribute( "d", "M30,"+middleLineY_4+" L70,"+middleLineY_4 );
			if ( middleLineY_4 >= 63) middleLine_4.style.opacity = "0";
			//bottom line
			if ( middleLineY_4 >= 63) bottomLine_4.style.opacity = "0";
			//recursion
			menuDisappearAnimation_4();
		});
	} else {
		bottomLine_4.style.opacity = "0";
		currentFrame_4 = 1;
		menuDisappearComplete_4 = true;
		openMenuAnimation_4();
	}
}

///Arrow Appear
function arrowAppearAnimation_4() {
	currentFrame_4++;
	if ( currentFrame_4 <= arrowAppearDurationInFrames_4 ) {
		window.requestAnimationFrame( ()=> { 
			//arrow
			arrowLegY_4 = AJS.easeOutBack( 63, 60, arrowAppearDurationInFrames_4, currentFrame_4 );
			arrowPointY_4 = AJS.easeOutBack( 63, 40, arrowAppearDurationInFrames_4, currentFrame_4 );
			topLine_4.setAttribute("points", "30 "+arrowLegY_4+" 50 "+arrowPointY_4+" 70 "+arrowLegY_4);
			//recursion
			arrowAppearAnimation_4();
		});
	} else {
		currentFrame_4 = 1;
		arrowAppearComplete_4 = true;
		menuAppearComplete_4 = false;
		openMenuAnimation_4();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_4() {
	if ( !menuDisappearComplete_4 ) { 
		menuDisappearAnimation_4();
	} else if ( !arrowAppearComplete_4) {
		arrowAppearAnimation_4();
	}
}

///Menu Return
function menuAppearAnimation_4() {
	currentFrame_4++;
	if ( currentFrame_4 <= menuAppearDurationInFrames_4 ) {
		window.requestAnimationFrame( ()=> { 
			//arrow to top line
			arrowLegY_4 = AJS.easeOutBounce( 60, 37, menuAppearDurationInFrames_4, currentFrame_4 );
			arrowPointY_4 = AJS.easeOutBounce( 40, 37, menuAppearDurationInFrames_4, currentFrame_4 );
			topLine_4.setAttribute("points", "30 "+arrowLegY_4+" 50 "+arrowPointY_4+" 70 "+arrowLegY_4);
			//middle line
			middleLineY_4 = AJS.easeOutBounce( 68, 50, menuAppearDurationInFrames_4, currentFrame_4 );
			middleLine_4.setAttribute( "d", "M30,"+middleLineY_4+" L70,"+middleLineY_4 );
			//bottom line
			bottomLineY_4 = AJS.easeOutBounce( 68, 63, menuAppearDurationInFrames_4, currentFrame_4 );
			bottomLine_4.setAttribute( "d", "M30,"+bottomLineY_4+" L70,"+bottomLineY_4 );
			//middle and bottom lines opacity
			hideawayLinesOpacity_4 = AJS.linear( 0, 1, fadeInDurationInFrames_4, currentFrame_4 );
			middleLine_4.style.opacity = hideawayLinesOpacity_4;
			bottomLine_4.style.opacity = hideawayLinesOpacity_4;
			//recursion
			menuAppearAnimation_4();
		});
	} else {
		currentFrame_4 = 1;
		menuDisappearComplete_4 = false;
		arrowAppearComplete_4 = false;
		menuAppearComplete_4 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_4() {
	if ( !menuAppearComplete_4 ) {
		menuAppearAnimation_4();
	}
}

///Events
icon_4.addEventListener( "click", ()=> {
  if ( state_4 === "menu" ) {
  	openMenuAnimation_4();
  	state_4 = "arrow"
  } else if ( state_4 === "arrow" ) {
  	closeMenuAnimation_4();
  	state_4 = "menu"
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 5  //////////////////////
/////////////////////////////////////////////////////


//Initiation Variables
var icon_5 = document.getElementById("b5");
var topLine_5 = document.getElementById("top-line-5");
var middleLine_5 = document.getElementById("middle-line-5");
var bottomLine_5 = document.getElementById("bottom-line-5");
var state_5 = "menu";  // can be "menu" or "arrow"
var topLineY_5;
var middleLineY_5;
var bottomLineY_5;
var topLeftY_5;
var topRightY_5;
var bottomLeftY_5;
var bottomRightY_5;
var topLeftX_5;
var topRightX_5;
var middleLeftX_5;
var middleRightX_5;
var bottomLeftX_5;
var bottomRightX_5;

///Animation Variables
var segmentDuration_5 = 25;
var menuDisappearDurationInFrames_5 = segmentDuration_5;
var arrowAppearDurationInFrames_5 = Math.round( segmentDuration_5*0.35 );
var arrowDisappearDurationInFrames_5 = Math.round( segmentDuration_5*0.35 );
var menuAppearDurationInFrames_5 = segmentDuration_5;
var menuDisappearComplete_5 = false;
var arrowAppearComplete_5 = false;
var arrowDisappearComplete_5 = true;
var menuAppearComplete_5 = true;
var currentFrame_5 = 0;
var lineDisappearDelay_5 = segmentDuration_5*0.2;
var lineAppearDelay_5 = lineDisappearDelay_5;
var lineDisappearDurationInFrames_5 = segmentDuration_5 - lineDisappearDelay_5*2;
var lineAppearDurationInFrames_5 = lineDisappearDurationInFrames_5;
var topLineOpacity_5 = 1;
var middleLineOpacity_5 = 1;
var bottomLineOpacity_5 = 1;

///Menu Disappear
function menuDisappearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= menuDisappearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
      if ( currentFrame_5 <= lineDisappearDurationInFrames_5 ) {
        topLeftX_5 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_5, currentFrame_5 );
        topRightX_5 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_5, currentFrame_5 );
        topLine_5.setAttribute( "d", "M"+topLeftX_5+",37 L"+topRightX_5+",37 Z" );
        topLineOpacity_5 = AJS.linear( 1, 0, lineDisappearDurationInFrames_5*0.85, currentFrame_5 );
        topLine_5.style.opacity = topLineOpacity_5;
      }
      //middle line
      if ( currentFrame_5 > lineDisappearDelay_5 && currentFrame_5 <= lineDisappearDurationInFrames_5 + lineDisappearDelay_5 ) {
        middleLeftX_5 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5 );
        middleRightX_5 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5 );
        middleLine_5.setAttribute( "d", "M"+middleLeftX_5+",50 L"+middleRightX_5+",50 Z" );
        middleLineOpacity_5 = AJS.linear( 1, 0, lineDisappearDurationInFrames_5*0.85, currentFrame_5 - lineDisappearDelay_5 );
        middleLine_5.style.opacity = middleLineOpacity_5;
      }
      //bottom line
      if ( currentFrame_5 > lineDisappearDelay_5*2 ) {
        bottomLeftX_5 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5*2 );
        bottomRightX_5 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5*2 );
        bottomLine_5.setAttribute( "d", "M"+bottomLeftX_5+",63 L"+bottomRightX_5+",63 Z" );
        bottomLineOpacity_5 = AJS.linear( 1, 0, lineDisappearDurationInFrames_5*0.85, currentFrame_5 - lineDisappearDelay_5*2 );
        bottomLine_5.style.opacity = bottomLineOpacity_5;
      }
			//recursion
			menuDisappearAnimation_5();
		});
	} else {
		currentFrame_5 = 0;
		menuDisappearComplete_5 = true;
		openMenuAnimation_5();
	}
}

///Arrow Appear
function arrowAppearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= arrowAppearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLeftX_5 = AJS.easeInQuad( 110, 50, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLeftY_5 = AJS.easeInQuad( 100, 40, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightX_5 = AJS.easeInQuad( 130, 70, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightY_5 = AJS.easeInQuad( 120, 60, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.setAttribute( "d", "M" + topLeftX_5 + "," + topLeftY_5 + " L" + bottomRightX_5 + "," + bottomRightY_5 );
			topLineOpacity_5 = AJS.easeInExpo( 0, 1, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.style.opacity = topLineOpacity_5;
			//bottom line
			bottomLeftX_5 = AJS.easeInQuad( -30, 30, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLeftY_5 = AJS.easeInQuad( 120, 60, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightX_5 = AJS.easeInQuad( -10, 50, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightY_5 = AJS.easeInQuad( 100, 40, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLine_5.setAttribute( "d", "M" + bottomLeftX_5 + "," + bottomLeftY_5 + " L" + topRightX_5 + "," + topRightY_5 );
      bottomLineOpacity_5 = AJS.easeInExpo( 0, 1, arrowAppearDurationInFrames_5, currentFrame_5 );
      bottomLine_5.style.opacity = bottomLineOpacity_5;      
			//recursion
			arrowAppearAnimation_5();
		});
	} else {
		currentFrame_5 = 0;
		arrowAppearComplete_5 = true;
		openMenuAnimation_5();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_5() {
	if ( !menuDisappearComplete_5 ) { 
		menuDisappearAnimation_5();
	} else if ( !arrowAppearComplete_5) {
		arrowAppearAnimation_5();
	}
}

///Arrow Disappear
function arrowDisappearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= arrowDisappearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> {
      //top line
			topLeftX_5 = AJS.easeInQuad( 50, 110, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLeftY_5 = AJS.easeInQuad( 40, 100, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightX_5 = AJS.easeInQuad( 70, 130, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightY_5 = AJS.easeInQuad( 60, 120, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.setAttribute( "d", "M" + topLeftX_5 + "," + topLeftY_5 + " L" + bottomRightX_5 + "," + bottomRightY_5 );
			topLineOpacity_5 = AJS.easeInExpo( 1, 0, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.style.opacity = topLineOpacity_5;
			//bottom line
			bottomLeftX_5 = AJS.easeInQuad( 30, -30, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLeftY_5 = AJS.easeInQuad( 60, 120, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightX_5 = AJS.easeInQuad( 50, -10, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightY_5 = AJS.easeInQuad( 40, 100, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLine_5.setAttribute( "d", "M" + bottomLeftX_5 + "," + bottomLeftY_5 + " L" + topRightX_5 + "," + topRightY_5 );
      bottomLineOpacity_5 = AJS.easeInExpo( 1, 0, arrowAppearDurationInFrames_5, currentFrame_5 );
      bottomLine_5.style.opacity = bottomLineOpacity_5; 
			//recursion
			arrowDisappearAnimation_5();
		});
	} else {
		middleLine_5.style.opacity = "1";
		currentFrame_5 = 0;
		arrowDisappearComplete_5 = true;
		closeMenuAnimation_5();
	}
}

///Menu Appear
function menuAppearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= menuAppearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> {  
			//top line
      if ( currentFrame_5 <= lineAppearDurationInFrames_5 ) {
        topLeftX_5 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_5, currentFrame_5 );
        topRightX_5 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_5, currentFrame_5 );
        topLine_5.setAttribute( "d", "M"+topLeftX_5+",37 L"+topRightX_5+",37 Z" );
        topLineOpacity_5 = AJS.linear( -2, 1, lineAppearDurationInFrames_5, currentFrame_5 );
        topLine_5.style.opacity = topLineOpacity_5;
      }
			//middle line
			if ( currentFrame_5 > lineAppearDelay_5 && currentFrame_5 <= lineAppearDurationInFrames_5 + lineAppearDelay_5 ) {
        middleLeftX_5 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5 );
        middleRightX_5 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5 );
        middleLine_5.setAttribute( "d", "M"+middleLeftX_5+",50 L"+middleRightX_5+",50 Z" );
        middleLineOpacity_5 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5 );
        middleLine_5.style.opacity = middleLineOpacity_5;
			}
			//bottom line
			if ( currentFrame_5 > lineAppearDelay_5*2 ) {
        bottomLeftX_5 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5*2 );
        bottomRightX_5 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5*2 );
        bottomLine_5.setAttribute( "d", "M"+bottomLeftX_5+",63 L"+bottomRightX_5+",63 Z" );
        bottomLineOpacity_5 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5*2 );
        bottomLine_5.style.opacity = bottomLineOpacity_5;
			}
			//recursion
			menuAppearAnimation_5();
		});
	} else {
		currentFrame_5 = 0;
		menuAppearComplete_5 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_5() {
	if ( !arrowDisappearComplete_5 ) {
		arrowDisappearAnimation_5();
	} else if ( !menuAppearComplete_5 ) {
		menuAppearAnimation_5();
	}
}

///Events
icon_5.addEventListener( "click", ()=> { 
  if ( state_5 === "menu" ) {
  	openMenuAnimation_5();
  	state_5 = "arrow";
  	arrowDisappearComplete_5 = false;
		menuAppearComplete_5 = false;
  } else if ( state_5 === "arrow" ) {
  	closeMenuAnimation_5();
  	state_5 = "menu";
  	menuDisappearComplete_5 = false;
		arrowAppearComplete_5 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 6  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_6 = document.getElementById("b6");
var topLine_6 = document.getElementById("top-line-6");
var middleLine_6 = document.getElementById("middle-line-6");
var bottomLine_6 = document.getElementById("bottom-line-6");
var state_6 = "menu";  // can be "menu" or "arrow"
var topLineY_6;
var middleLineY_6;
var bottomLineY_6;
var topLeftX_6;
var topRightX_6;
var middleLeftX_6;
var middleRightX_6;
var bottomLeftX_6;
var bottomRightX_6;
var topLeftY_6;
var topRightY_6;
var middleLeftY_6;
var middleRightY_6;
var bottomLeftY_6;
var bottomRightY_6;

///Animation Variables
var segmentDuration_6 = 20;
var menuDisappearDurationInFrames_6 = segmentDuration_6;
var arrowAppearDurationInFrames_6 = segmentDuration_6;
var arrowDisappearDurationInFrames_6 = segmentDuration_6;
var menuAppearDurationInFrames_6 = segmentDuration_6;
var menuDisappearComplete_6 = false;
var arrowAppearComplete_6 = false;
var arrowDisappearComplete_6 = true;
var menuAppearComplete_6 = true;
var currentFrame_6 = 0;
var cPt_6 = { x: 50, y: 50 };  // center point
var tlPt_6 = { x: 30, y: 37 };  // top right point
var trPt_6 = { x: 70, y: 37 };  // top left point
var mlPt_6 = { x: 30, y: 50 };  // middle right point
var mrPt_6 = { x: 70, y: 50 };  // middle left point
var blPt_6 = { x: 30, y: 63 };  // bottom right point
var brPt_6 = { x: 70, y: 63 };  // bottom left point


///Position Rotation
function positionRotation( centerPoint, orbitPoint, angleInRads ) {
  var distance = Math.sqrt( Math.pow( orbitPoint.x-centerPoint.x, 2 ) + Math.pow( orbitPoint.y-centerPoint.y, 2 ) );
  orbitPoint.x = centerPoint.x + Math.cos( angleInRads ) * distance;
  orbitPoint.y = centerPoint.y + Math.sin( angleInRads ) * distance;
}

///Menu Disappear
function menuDisappearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= menuDisappearDurationInFrames_6 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;  // menu disappear rotation
			//top line
      var tlAng = AJS.easeInBack( 3.7179, 3.7179+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var trAng = AJS.easeInBack( 5.7068, 5.7068+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, tlPt_6, tlAng );
      positionRotation( cPt_6, trPt_6, trAng );
      topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
      //middle line
      var mlAng = AJS.easeInBack( Math.PI, Math.PI+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeInBack( 0, rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      var blAng = AJS.easeInBack( 2.5652, 2.5652+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var brAng = AJS.easeInBack( 0.5763, 0.5763+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, blPt_6, blAng );
      positionRotation( cPt_6, brPt_6, brAng );
      bottomLine_6.setAttribute( "d", "M"+blPt_6.x+","+blPt_6.y+" L"+brPt_6.x+","+brPt_6.y+" Z" );
			//recursion
			menuDisappearAnimation_6();
		});
	} else {
		currentFrame_6 = 0;
		menuDisappearComplete_6 = true;
		openMenuAnimation_6();
	}
}

///Arrow Appear
function arrowAppearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= arrowAppearDurationInFrames_6 ) {
    tlPt_6 = { x: 60, y: 30 };
    trPt_6 = { x: 40, y: 50 };
    mlPt_6 = { x: 40, y: 50 };
    mrPt_6 = { x: 60, y: 70 };
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;  // arrow appear rotation
			//top line
      var tlAng = AJS.easeOutBack( 5.1759, 5.1759+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      var trAng = AJS.easeOutBack( Math.PI, Math.PI+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, tlPt_6, tlAng );
      positionRotation( cPt_6, trPt_6, trAng );
      topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
			//center line
      var mlAng = AJS.easeOutBack( Math.PI, Math.PI+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeOutBack( 1.1072, 1.1072+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      bottomLine_6.style.opacity = 0;
			//recursion
			arrowAppearAnimation_6();
		});
	} else {
		currentFrame_6 = 0;
		arrowAppearComplete_6 = true;
		openMenuAnimation_6();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_6() {
	if ( !menuDisappearComplete_6 ) { 
		menuDisappearAnimation_6();
	} else if ( !arrowAppearComplete_6) {
		arrowAppearAnimation_6();
	}
}

///Arrow Disappear
function arrowDisappearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= arrowDisappearDurationInFrames_6 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;  // arrow disapear rotation
			//top line
      var tlAng = AJS.easeInBack( 0.4635, 0.4635+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      var trAng = AJS.easeInBack( Math.PI*1.5, Math.PI*1.5+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, tlPt_6, tlAng );
      positionRotation( cPt_6, trPt_6, trAng );
      topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
			//center line
      var mlAng = AJS.easeInBack( Math.PI*1.5, Math.PI*1.5+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeInBack( 2.6779, 2.6779+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      bottomLine_6.style.opacity = 0;
			//recursion
			arrowDisappearAnimation_6();
		});
	} else {
		middleLine_6.style.opacity = "1";
		currentFrame_6 = 0;
		arrowDisappearComplete_6 = true;
		closeMenuAnimation_6();
	}
}

///Menu Appear
function menuAppearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= menuAppearDurationInFrames_6 ) {
    tlPt_6 = { x: 37, y: 70 };
    trPt_6 = { x: 37, y: 30 };
    mlPt_6 = { x: 50, y: 70 };
    mrPt_6 = { x: 50, y: 30 };
    bottomLine_6.style.opacity = 1;
		window.requestAnimationFrame( ()=> {  
      var rotation = Math.PI*0.5;  // menu appear rotation
			//top line
			var tlAng = AJS.easeOutBack( 2.1471, 2.1471+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
			var trAng = AJS.easeOutBack( 4.1360, 4.1360+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
			positionRotation( cPt_6, tlPt_6, tlAng );
			positionRotation( cPt_6, trPt_6, trAng );
			topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
      //middle line
      var mlAng = AJS.easeOutBack( Math.PI*0.5, Math.PI*0.5+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeOutBack( Math.PI*1.5, Math.PI*1.5+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      var blAng = AJS.easeOutBack( 0.9944, 0.9944+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var brAng = AJS.easeOutBack( 5.2887, 5.2887+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, blPt_6, blAng );
      positionRotation( cPt_6, brPt_6, brAng );
      bottomLine_6.setAttribute( "d", "M"+blPt_6.x+","+blPt_6.y+" L"+brPt_6.x+","+brPt_6.y+" Z" );
			//recursion
			menuAppearAnimation_6();
		});
	} else {
		currentFrame_6 = 0;
		menuAppearComplete_6 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_6() {
	if ( !arrowDisappearComplete_6 ) {
		arrowDisappearAnimation_6();
	} else if ( !menuAppearComplete_6 ) {
		menuAppearAnimation_6();
	}
}

///Events
icon_6.addEventListener( "click", ()=> { 
  if ( state_6 === "menu" ) {
  	openMenuAnimation_6();
  	state_6 = "arrow";
  	arrowDisappearComplete_6 = false;
		menuAppearComplete_6 = false;
  } else if ( state_6 === "arrow" ) {
  	closeMenuAnimation_6();
  	state_6 = "menu";
  	menuDisappearComplete_6 = false;
		arrowAppearComplete_6 = false;
  }
});




///////////////// DEMO //////////////////

function playDemo() { 
  setTimeout( function() { icon_1.click(); }, 1000 );
  setTimeout( function() { icon_1.click(); }, 2000 );
  setTimeout( function() { icon_2.click(); }, 3000 );
  setTimeout( function() { icon_2.click(); }, 4000 );
  setTimeout( function() { icon_3.click(); }, 5000 );
  setTimeout( function() { icon_3.click(); }, 6000 );
  setTimeout( function() { icon_4.click(); }, 7000 );
  setTimeout( function() { icon_4.click(); }, 8000 );
  setTimeout( function() { icon_5.click(); }, 9000 );
  setTimeout( function() { icon_5.click(); }, 10000 );
  setTimeout( function() { icon_6.click(); }, 11000 );
  setTimeout( function() { icon_6.click(); playDemo(); }, 12000 );
}

document.addEventListener("DOMContentLoaded", function(event) { 
  //playDemo();
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console