<div class="wrap">
  <button class="js-open btn-open is-active">Show modal</button>
  <div class="modal js-modal">
    <div class="modal-image">
      <svg viewBox="0 0 32 32" style="fill:#48DB71"><path d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z"></path></svg>
    </div>
    <h1>Nice job!</h1>
    <p>To dismiss click the button below</p>
    <button class="js-close">Dismiss</button>
  </div>
</div>

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  background-color: #eee;
}

.wrap {
  margin: auto;
}

.modal {
  background-color: #fff;
  padding: 2em 3em;
  text-align: center;
  border-radius: .5em;
  display: none;
  &.is-active { display: block; }
}

.modal-image {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #48DB71;
  padding: 11px 10px 2px;
  margin-bottom: 2em;
}

h1 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: .5em;
}

p {
  margin-bottom: 2em;
  color: #666;
}

.btn-open {
  display: none;
  &.is-active { display: block; }
}

button {
  font-size: 1.25em;
  font-weight: bold;
  background-color: #000;
  border: none;
  padding: .5em 1em;
  color: #fff;
  box-shadow: 0 0 0 2px #000 inset;
  border-radius: .25em;
  cursor: pointer;
  transition: background .4s ease, color .4s ease;
  
  &:hover {
    box-shadow: 0 0 0 2px #000 inset;
    color: #000;
    background-color: transparent;
  }
}

// External JS: JS Helper Functions
// External JS: Dynamics JS

var btnOpen = select('.js-open');
var btnClose = select('.js-close');
var modal = select('.js-modal');
var modalChildren = modal.children;

function hideModal() {
  dynamics.animate(modal, {
    opacity: 0,
    translateY: 100
  }, {
    type: dynamics.spring,
    frequency: 50,
    friction: 600,
    duration: 1500
  });
}

function showModal() {
  // Define initial properties
  dynamics.css(modal, {
    opacity: 0,
    scale: .5
  });
  
  // Animate to final properties
  dynamics.animate(modal, {
    opacity: 1,
    scale: 1
  }, {
    type: dynamics.spring,
    frequency: 300,
    friction: 400,
    duration: 1000
  });
}

function showBtn() {
  dynamics.css(btnOpen, {
    opacity: 0
  });
  
  dynamics.animate(btnOpen, {
    opacity: 1
  }, {
    type: dynamics.spring,
    frequency: 300,
    friction: 400,
    duration: 800
  });
}

function showModalChildren() {
  // Animate each child individually
  for(var i=0; i<modalChildren.length; i++) {
    var item = modalChildren[i];
    
    // Define initial properties
    dynamics.css(item, {
      opacity: 0,
      translateY: 30
    });

    // Animate to final properties
    dynamics.animate(item, {
      opacity: 1,
      translateY: 0
    }, {
      type: dynamics.spring,
      frequency: 300,
      friction: 400,
      duration: 1000,
      delay: 100 + i * 40
    });
  } 
}

function toggleClasses() {
  toggleClass(btnOpen, 'is-active');
  toggleClass(modal, 'is-active');
}

// Open nav when clicking sandwich button
btnOpen.addEventListener('click', function(e) {
  toggleClasses();
  showModal();
  showModalChildren();
});

// Open nav when clicking sandwich button
btnClose.addEventListener('click', function(e) {
  hideModal();
  dynamics.setTimeout(toggleClasses, 500);
  dynamics.setTimeout(showBtn, 500);
});