JSFiddle - React, Tailwind, and code Playground

by Niffler

HTML

<div class="menu-contact trans-short">
  <dir class="wrap">
    <!-- 
    these 2 are one button. depending on the state one disappears 
    -->
    <a href="#" class="btn-contact">CONTACT</a>
    <a href="#" class="btn-contact-close off">CLOSE</a>
  </dir>
</div>

CSS

.off {
  display: none;
}

JavaScript

// contact button
$(document).on('click', 'a.btn-contact', function(){

  // disable scrolling
  //$.fn.fullpage.setAllowScrolling(false);
  //$.fn.fullpage.setKeyboardScrolling(false);

  setTimeout(function() {
    // switch to display block
    $( ".content-wrapper-contact" ).removeClass( "off" );
  }, 300);

  // fade out other elements
  $( '.container' ).addClass( 'blur' );
  $( ".content-wrapper" ).fadeOut(300);
  $( ".page-title" ).fadeOut(600);

  setTimeout(function() {
    $('.nav-bottom li').addClass('fade');
    $( '.media-container' ).addClass( 'blur' );
    $( '.overlay-title' ).addClass('reveal');

  }, 800);

  // button animation: contact -> close
  $('.menu-contact').addClass('fade a-to-top');
  setTimeout(function() {

    // fade in the overlay container
    $( ".content-wrapper-contact" ).removeClass( "fade" );

    $('.btn-contact').addClass('off');
    $('.btn-contact-close').removeClass('off');
    setTimeout(function() {
      $('.menu-contact').removeClass('fade a-to-top');
    }, 510);
  }, 510);

});

$(document).on('click', 'a.btn-contact-close', function(){

  // button animation: close -> contact
  $('.menu-contact').removeClass('fade a-to-top');
  setTimeout(function() {

    // fade in the overlay container
    $( ".content-wrapper-contact" ).addClass( "fade" );

    $('.btn-contact').removeClass('off');
    $('.btn-contact-close').addClass('off');
    setTimeout(function() {
      $('.menu-contact').addClass('fade a-to-top');
    }, 510);
  }, 510);  

});