Fancy Folding Modal Popup With JavaScript And CSS

A fancy modal popup that comes with a fancy folding animation effect based on SVG, CSS/CSS3, and GSAP JavaScript animation library.

How to use it:

Create the html for the modal window.

<div id="modal-demo" class="modal-container">
  
  <div class="modal-dialog">    
    <svg class="modal-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
      <polygon class="modal-polygon">
    </svg>
    
    <div class="modal-content">
      <h2>Modal Title</h2>
      <p>Modal Content Here</p>
    </div>
    
  </div>
</div>

Create a standard button to open the modal window.

<button id="open-button">Launch</button>

Style the modal window in the CSS as these:

.modal-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
}
.modal-dialog {
  width: 70vmin;
  height: 70vmin;
  position: relative;
  overflow: hidden;
}
.modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal-polygon { fill: #ab47bc; }
.modal-content {
  position: relative;
  top: 0;
  left: 0;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  color: rgba(255, 255, 255, 0.87);
}

Include the necessary GSAP’s TweenMax.js library on the page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>

The JavaScript to activate the modal window & folding animation.

var body = document.body;
var modal = createModal(document.querySelector("#modal-demo"));
var openButton = document.querySelector("#open-button");
openButton.addEventListener("click", function() {
  modal.open();
});
function createModal(container) {
  
  var content = container.querySelector(".modal-content");
  var dialog = container.querySelector(".modal-dialog");
  var polygon = container.querySelector(".modal-polygon");
  var svg = container.querySelector(".modal-svg");
  
  var point1 = createPoint(45, 45);
  var point2 = createPoint(55, 45);
  var point3 = createPoint(55, 55);
  var point4 = createPoint(45, 55);
      
  var animation = new TimelineMax({    
      onReverseComplete: onReverseComplete,
      onStart: onStart,
      paused: true
    })     
    .to(point1, 0.3, {
      x: 15,
      y: 30,
      ease: Power4.easeIn
    }, 0)
    .to(point4, 0.3, {
      x: 5,
      y: 80,
      ease: Power2.easeIn
    }, "-=0.1")
    .to(point1, 0.3, {
      x: 0,
      y: 0,
      ease: Power3.easeIn
    })
    .to(point2, 0.3, {
      x: 100,
      y: 0,
      ease: Power2.easeIn
    }, "-=0.2")
    .to(point3, 0.3, {
      x: 100,
      y: 100,
      ease: Power2.easeIn
    })
    .to(point4, 0.3, {
      x: 0,
      y: 100,
      ease: Power2.easeIn
    }, "-=0.1")  
    .to(container, 1, {
      autoAlpha: 1
    }, 0)  
    .to(content, 1, {
      autoAlpha: 1
    })
  
  var modal = {
    animation: animation,
    container: container,
    content: content,
    dialog: dialog,    
    isOpen: false,
    open: open,
    close: close   
  };
  
  body.removeChild(container);
    
  function onClick() {
    
    if (modal.isOpen) {
      close();
    }
  }
  
  function onStart() {
    body.appendChild(container);
    container.addEventListener("click", onClick);
  }
  
  function onReverseComplete() {
    container.removeEventListener("click", onClick);
    body.removeChild(container);
  }
  
  function open() {
    modal.isOpen = true;
    animation.play().timeScale(2);
  }
  
  function close() {
    modal.isOpen = false;
    animation.reverse().timeScale(2.5);
  }
    
  function createPoint(x, y) {
    var point = polygon.points.appendItem(svg.createSVGPoint());
    point.x = x || 0;
    point.y = y || 0;
    return point;
  }
  
  return modal;
}