import { keyframes , css } from 'styled-components/macro' ; export const springWobbly = ( t ) => - 1 * Math . pow ( 2.71828 , - 6 * t ) * Math . sin ( 12 * t ) - 1 * Math . pow ( 2.71828 , - 6 * t ) * Math . cos ( 12 * t ) + 1 ; export const springStiff = ( t ) => - 1 * Math . pow ( 2.71828 , - 9.5 * t ) * Math . sin ( 9.1515 * t ) - 1 * Math . pow ( 2.71828 , - 9.5 * t ) * Math . cos ( 9.1515 * t ) + 1 ; function hamburgerBottomForward ( ) { let styles = '' ; for ( let i = 0 ; i <= 100 ; i += 1 ) { styles += `
          ${ i }% {
            transform: translate3d(${ springWobbly ( i / 50 ) * - 8 }px, ${ springWobbly ( i / 50 ) * - 2 }px, 0) rotate(${ springWobbly ( i / 50 ) * 45 }deg) scaleX(${ 1 - springWobbly ( i / 50 ) * 0.5 });
          }
          ` ; } return css `
      ${ styles }
    ` ; } export const HamburgerBottomForward = keyframes `
    ${ hamburgerBottomForward ( ) };
  ` ; function hamburgerTopForward ( ) { let styles = '' ; for ( let i = 0 ; i <= 100 ; i += 1 ) { styles += `
        ${ i }% {
          transform: translate3d(${ springWobbly ( i / 50 ) * - 8 }px, ${ springWobbly ( i / 50 ) * 2 }px, 0) rotate(${ springWobbly ( i / 50 ) * - 45 }deg) scaleX(${ 1 - springWobbly ( i / 50 ) * 0.5 });
        }
        ` ; } return css `
    ${ styles }
  ` ; } export const HamburgerTopForward = keyframes `
  ${ hamburgerTopForward ( ) };
` ; function hamburgerBottomBackward ( ) { let styles = '' ; for ( let i = 0 ; i <= 100 ; i += 1 ) { styles += `
          ${ i }% {
            transform: translate3d(${ - 8 - springWobbly ( i / 50 ) * - 8 }px, ${ - 2 - springWobbly ( i / 50 ) * - 2 }px, 0) rotate(${ 45 - springWobbly ( i / 50 ) * 45 }deg) scaleX(${ 0.5 + springWobbly ( i / 50 ) * 0.5 });
          }
          ` ; } return css `
      ${ styles }
    ` ; } export const HamburgerBottomBackward = keyframes `
    ${ hamburgerBottomBackward ( ) };
  ` ; function hamburgerTopBackward ( ) { let styles = '' ; for ( let i = 0 ; i <= 100 ; i += 1 ) { styles += `
        ${ i }% {
          transform: translate3d(${ - 8 - springWobbly ( i / 50 ) * - 8 }px, ${ 2 - springWobbly ( i / 50 ) * 2 }px, 0) rotate(${ - 45 - springWobbly ( i / 50 ) * - 45 }deg) scaleX(${ 0.5 + springWobbly ( i / 50 ) * 0.5 });
        }
        ` ; } return css `
    ${ styles }
  ` ; } export const HamburgerTopBackward = keyframes `
  ${ hamburgerTopBackward ( ) };
` ; export const slideRightEnter = keyframes `
from {
  transform: translate3d(-200px, 0, 0);
  opacity: 0;
}
to {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
` ; export const slideRightExit = keyframes `
from {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
to {
  transform: translate3d(100px, 0, 0);
  opacity: 0;
}
` ; export const slideLeftEnter = keyframes `
from {
  transform: translate3d(200px, 0, 0);
  opacity: 0;
}
to {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
` ; export const slideLeftExit = keyframes `
from {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
to {
  transform: translate3d(-100px, 0, 0);
  opacity: 0;
}
` ; export const fadeIn = keyframes `
from {
  opacity: 0;
}
to {
  opacity: 1;
}
` ; export const fadeInFromLeft = keyframes `
from {
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
}
to {
  opacity: 1;
  transform: translate3d(0px, 0, 0);
}
` ; export const fadeInFromRight = keyframes `
from {
  opacity: 0;
  transform: translate3d(50px, 0, 0);
}
to {
  opacity: 1;
  transform: translate3d(0px, 0, 0);
}` ; export const fadeInFromTop = keyframes `
  from {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
  }
` ; export const fadeInFromBottom = keyframes `
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
  }
` ;