Full screen camera zoom on click on pure js

There is a full screen image. The task is that when you click on an image element, the image element will smoothly increase (like a camera bumping over a specific element) in pure js. My idea was to cut the picture into small pictures and when I clicked on an element, this block increased to fill the screen, pushing other blocks away, but so far it does not look very much like "camera zoom". How to modify this option or are there options for a smooth zoom of an image element on click better?

console.clear();

var root  = document.documentElement;
var body  = document.body;
var pages = document.querySelectorAll(".page");
var tiles = document.querySelectorAll(".tile");

for (var i = 0; i < tiles.length; i++) {  
  addListeners(tiles[i], pages[i]);
}

function addListeners(tile, page) {
  
  tile.addEventListener("click", function() {
    animateHero(tile, page);
  });
  
  page.addEventListener("click", function() {
    animateHero(page, tile);
  });  
}

function animateHero(fromHero, toHero) {
    
  var clone = fromHero.cloneNode(true);
      
  var from = calculatePosition(fromHero);
  var to = calculatePosition(toHero);
  
  TweenLite.set([fromHero, toHero], { visibility: "hidden" });
  TweenLite.set(clone, { position: "absolute", margin: 0 });
  
  body.appendChild(clone);  
      
  var style = {
    x: to.left - from.left,
    y: to.top - from.top,
    width: to.width,
    height: to.height,
    autoRound: false,
    ease: Power1.easeOut,
    onComplete: onComplete
  };
   
  TweenLite.set(clone, from);  
  TweenLite.to(clone, 0.3, style)
    
  function onComplete() {
    
    TweenLite.set(toHero, { visibility: "visible" });
    body.removeChild(clone);
  }
}

function calculatePosition(element) {
    
  var rect = element.getBoundingClientRect();
  
  var scrollTop  = window.pageYOffset || root.scrollTop  || body.scrollTop  || 0;
  var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0;
  
  var clientTop  = root.clientTop  || body.clientTop  || 0;
  var clientLeft = root.clientLeft || body.clientLeft || 0;
    
  return {
    top: Math.round(rect.top + scrollTop - clientTop),
    left: Math.round(rect.left + scrollLeft - clientLeft),
    height: rect.height,
    width: rect.width,
  };
}

  .tile {
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0; 
    cursor: pointer;  
    display: inline-block;
  }
  
  .page-container {
    visibility: hidden;
  }
  
  .page {
    cursor: pointer;
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    position: fixed;
  }
  
  .hero-1 {
    background: #F4DB33;
  }
    .hero-2 {
    background: #000;
  }

 <div class="tile hero-1"></div>
          <div class="tile hero-2"></div>

      
      <div class="page-container">
        <div class="page hero-1"></div>
      </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.3/TweenMax.min.js"></script>