skip popup animation

by Ercan Cicek

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<button id="animTrigBtn" class="btn">click here to<br /> toggle popup</button>
  <div id="popUp-wrapper">
    <div id="popUp-details-speed-container">
      <canvas id="popUp-details-container"></canvas>
      <canvas id="popUp-details-container-2"></canvas>
    </div>
    <div id="popUp-filled-container" class="flex-display flex-column flex-center">
      <span>Are you sure you want to skip this level?</span>
      <div id="popUp-btn-container" class="flex-display flex-row flex-center">
        <button id="btnYes" class="btn">yes</button>
        <button id="btnNo" class="btn">no</button>
      </div>
    </div>
  </div>

CSS

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#animTrigBtn {
  margin: .5em 0 0 .5em;
}

#popUp-wrapper {
  position: absolute;
  bottom: -40%; /* fallback */
  transform: scale(0);
  left: -3vw;
  width: 106%;
  height: 106vw; /* fallback */
  transition: transform .33s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@media all and (orientation: landscape) {
  #popUp-wrapper {
    bottom: -170%;
  }
}

.newTrans {
  transition: transform .75s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}

#popUp-wrapper.active {
  transform: scale(1);
}

#popUp-details-speed-container, #popUp-details-container, #popUp-details-container-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

#popUp-wrapper.active > #popUp-details-speed-container > #popUp-details-container {
  animation: rotate 28s linear infinite;
}

#popUp-wrapper.active > #popUp-details-speed-container > #popUp-details-container-2 {
  animation: rotate 20s linear infinite;
}

.fastRotLeft {
  animation: rotateNeg 1.2s ease-in-out 1;
}

.fastRotRight {
  animation: rotate 1.2s ease-in-out 1;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateNeg {
  100% {
    transform: rotate(-360deg);
  }
}

#popUp-filled-container {
  position: absolute;
  left: 3vw; /* fallback */
  top: 3vw; /* fallback */
  width: calc(100% - 6vw); /* fallback */
  height: calc(100% - 6vw); /* fallback */
  border-radius: 50%;
  background: #5da0ff;
}

#popUp-filled-container > span {
  margin-bottom: 3%;
  font-size: 1.33em;
  color: #f5f5f5;
  width: 45%;
  text-align: center;
}

#popUp-btn-container {
  margin-bottom: 50%;
}

#popUp-btn-container > button {
  border-radius: 40%;
  min-width: 60%;
  background-color: white;
  color: #5da0ff;
  font-weight: bold;
}

#popUp-btn-container > button:last-child {
  margin-left: 15%;
}

.flex-display {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
...

JavaScript

var viewWidth = 0,
    detailWidth = 0;

function init() {
  $("#animTrigBtn").click(function() { showSkipPopup(); });
  $("#btnYes").click(function() { btnClicked(true); });
  $("#btnNo").click(function() { btnClicked(false); });
  $(window).resize(setElements);
}

function showSkipPopup() {
  setElements();
  $("#popUp-wrapper").toggleClass("active");
}

function setElements() {
  viewWidth = $("#popUp-wrapper").width();
  detailWidth = viewWidth * 0.03;
  $("#popUp-wrapper").css({
    "height": viewWidth + "px",
    "left": -detailWidth + "px",
    "bottom": -viewWidth * 0.55 + "px"
  });
  $("#popUp-filled-container").css({
    "left": detailWidth + "px",
    "top": detailWidth + "px",
    "width": viewWidth - (2 * detailWidth) + "px", // --- 106% - 4 * 3% => 94%
    "height": viewWidth - (2 * detailWidth) + "px" // --- 106% - 4 * 3% => 94%
  });
  setCircleAnimCanvas("#popUp-details-container", "slow");
  setCircleAnimCanvas("#popUp-details-container-2", "fast");
}

function btnClicked(yesClicked) {
  var animEnd = 1200;
  $("#popUp-details-speed-container").addClass(yesClicked ? "fastRotRight" : "fastRotLeft");
  $("#popUp-wrapper").addClass("newTrans");
  setTimeout(function() {
    $(".active").removeClass("active");
  }, animEnd / 2);
  setTimeout(function() {
    $(".fastRotRight, .fastRotLeft").removeClass("fastRotRight fastRotLeft");
    $(".newTrans").removeClass("newTrans");
  }, animEnd);
}

function setCircleAnimCanvas(relCont, variant) {
  var $el = $(relCont),
      wndw = {
        w: $el.width(),
        h: $el.height()
      },
      canvas = $el[0],
      context = canvas.getContext('2d');
  canvas.width = wndw.w;
  canvas.height = wndw.h;

  function drawCircle(startAngle, endAngle, circleCol) {
    context.beginPath();
    context.arc(canvas.width / 2, canvas.height / 2, (wndw.h >= wndw.w ? wndw.w / 2.1 : wndw.h / 2.1), startAngle, endAngle, false);
    context.lineWidth = detailWidth * 3;
    context.strokeStyle = circleCol;
   ...