Mobile modal animation

index.html

.prototype
  .header
    span.hamburger
    h1 App Name
  .content
    button Some button
    #maskHolder.mask
      span.cross

Mobile modal animation.markdown

Mobile modal animation

I wanted to play a little with animations timing for a mobile modal, and here are the results.

Click on the blue circle to open the modal, then click on the blue background to close it.

UPDATE: Ok, since this was a rather simple pen I decided to work on my vanilla JS skills and remove jQuery. If you see anything wrong with it, just let me know! :D

A Pen by Nicolás J. Engler on CodePen.

License.

script.js

var mask = document.getElementById('maskHolder');

var toggleModal = function() {
  mask.classList.toggle('is-open');
  console.log('You\'re interacting with the modal window!')
}

mask.addEventListener("click", toggleModal);

style.css

html,
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Lato', sans-serif;
}

body {
  min-height: 100vh;
  padding: 25px;
  background: linear-gradient(#FAFAFA, #F1F1F1);
  position: relative;
}

.prototype {
  width: 320px;
  height: 480px;
  border-radius: 5px;
  background: #58228b;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  box-shadow: 0 0 15px rgba(black,.5);
  overflow: hidden;
}

.header {
  cursor: pointer;
  
  .hamburger {
    display: inline-block;
    line-height: 1;
    margin: 0 15px 0 15px;
    width: 18px;
    height: 3px;
    background: white;
    line-height: 40px;
    position: relative;
    
    &:before,
    &:after {
      content: '';
      display: inline-block;
      width: 18px;
      height: 3px;
      position: absolute;
      background: white;
    }
    
    &:before {
      top: -6px;
      left: 0;
    }
    
    &:after {
      top: 6px;
      left: 0;
    }
  }
  
  h1 {
    display: inline-block;
    line-height: 40px;
    height: 40px;
    vertical-align: middle;
    margin: 4px 0 0 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
    color: white;
    text-transform: uppercase;
  }
}

.content {
  padding: 25px;
  
  button {
    display: block;
    width: auto;
    margin: 0 auto;
    cursor: pointer;
    border: 2px solid rgba(white,.5);
    border-radius: 20px;
    padding: 10px 20px;
    background: rgba(white, 0);
    text-transform: uppercase;
    font-size: 14px;
    color: white;
    text-shadow: 1px 1px 0 rgba(black,.25);
    transition: .3s ease-in-out;
    
    &:hover {
      border-color: rgba(white, 1);
      background: rgba(white, .1);
    }
  }

  .mask {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #5856D6;
    z-index: 999;
    box-shadow: 0 5px 30px rgba(black, .25);
    transition: top 1.5s cubic-bezier(.55,0,.1,1),
                width .5s cubic-bezier(.55,0,.1,1) .7s,
                height .5s cubic-bezier(.55,0,.1,1) .7s;
    
    &.is-open {
      top: 0;
      width: 1500px;
      height: 1500px;
    }
  }
}