정보실

웹학교

정보실

css CodePen Home SVG Hamburger Menu Icon Animation Collection

본문

애니메이션 햄버거 메뉴 아이콘 집합...


HTML : 



<!-- 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>


CSS : 



#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; } */



Javascript : 




/////////////////////////////////////////////////////

/////////////////////  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();

});






  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 15회 ]  작성일20-01-09 11:23

웹학교