Css translate expand on click

by amindunited

HTML

<div class="wrap">
  <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </ul>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}
.wrap {
  height: 85px;
  width: 90%;
  overflowX: scroll;
  white-space: nowrap;
}
ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.wrap ul li {
  text-align: center;
  line-height: 80px;
  height: 80px;
  width: 60px;
  border: solid 1px #efefef;
  border-radius: 3px;
  display: inline-block;
}

.wrap ul li.selected {
  background-color: rgba(255, 255, 0, .5);
  animation:         swoosh 500ms 1;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#modal-background {
  position: fixed;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  background-color: rgba(127, 127, 127, .5);
}

li.clone {
  position: absolute;
  list-style-type: none;
  text-align: center;
  line-height: 80px;
  height: 80px;
  width: 60px;
  border: solid 1px #efefef;
  border-radius: 3px;
  display: inline-block;
  background-color: rgba(127, 0, 0, .5);
}

@keyframes swoosh {
   0%   { transform: scale(.9) translate(5%, 5%);}
  10%   { transform: scale(.8) translate(7%, 7%); }
  20%   { transform: scale(.7) translate(10%, 10%); }
  30%   { transform: scale(.9) translate(20%, 20%); }
  40%   { transform: scale(1) translate(30%, 30%); }
  50%   { transform: scale(1.2) translate(40%, 40%); }
  60%   { transform: scale(1.4) translate(50%, 50%); }
  70%   { transform: scale(1.6) translate(60%, 60%); }
  80%   { transform: scale(1.8) translate(70%, 70%); }
  90%   { transform: scale(1.5) translate(80%, 80%); }
  99%   { transform: scale(1) translate(100%, 100%);}
  100%   { transform: scale(1) translate(100%, 100%);}
}

JavaScript

var listElementClickHandler = function (e) {
  	
    var previous = document.querySelectorAll('.wrap ul li.selected');
    var clone = document.querySelector('li.clone');
    if (clone) {
    	clone.parentNode.removeChild(clone);
    }
    
    previous.forEach(function (pEl) { 
    	pEl.classList.remove('selected'); 
    });
		e.target.classList.toggle('selected');
    createModalBackround();
    duplicateElement(e.target);
};

var calculateDeepOffset = function (elm) {
	let parentNode, x, y;
  parentNode = elm;
  y = elm.offsetTop;
  x = elm.offsetLeft;
  
  while(parentNode.parentNode.tagName) {
  console.log('...', parentNode.parentNode, parentNode.parentNode.tagName);
  	y += parentNode.parentNode.offsetTop;
    x += parentNode.parentNode.offsetLeft;
    parentNode = parentNode.parentNode;
  }
  
  return {top: y, left: x};
};

var createModalBackground = function () {
	let background = document.createElement('div');
  background.id = 'modal-background';
  let body = document.querySelector('body');
  body.appendChild(newElm);
};

var duplicateElement = function (elm) {
	
	var newElm = elm.cloneNode(true);
  var pos = calculateDeepOffset(elm);
  newElm.classList.add('clone');
	newElm.style.top = pos.top + 'px';
  newElm.style.left = pos.left + 'px';
  let body = document.querySelector('body');
  body.appendChild(newElm);
  console.log('pos ', pos);
  
};

var attachListElementListeners = function () {
  var listElements = document.querySelectorAll('.wrap ul li');

  listElements.forEach(function (el, index, arr) {
    console.log('booop', el);
    el.addEventListener('click', listElementClickHandler);
  });
};

attachListElementListeners();