Zoomable, resizable flex grid

Question

I have flex based grid with 5x5 elements. 3x3 grid in the middle is clickable, and click on element makes it's background red and resizes width and height. Other elements are resizing to this central element.

Here is link to codepen: codepen

Now I want to zoom after click to central red element and 8 surrounding elements only - so only 9 elements will be visible. Next when I change center element, view changes and have clicked element and 8 elements around. Other elements disappear. Finally I want to see only 9 elements and move around them.

I tried to change display and opacity but then animation isn't smooth.

Maybe you guys have any solution or idea how to solve this or some tool/library which helps me achive this?

Answer 1

I noticed that as the user, I can't click on the outermost elements. Taking this into consideration, here's my solution.

It's not pretty, but it solves half of your problem (hiding only, not zooming).

Add this to the bottom of your javascript. Make sure you add jQuery in codepen. Also, here's the working pen based on your own pen .

document.getElementById('app').getElementsByClassName('wrapper')[0].addEventListener("click", function(){
  showAll();
  hideOthers();
});

document.addEventListener("dblclick", function(){
  showAll();
});

function hideOthers() {
  var activeChild = $('.wrapper .center-zoom').index() + 1;
  var indexToHide = [18,17,16,15,14,13,12,11,10,9,8,7,3,2];
  hideThese = new Array(26);
  for(i = 0; i < indexToHide.length; i++){
    hideThese[i] = activeChild - indexToHide[i];
  }

  for(j = 14; j < (indexToHide.length) * 2; j++){
    hideThese[j] = activeChild + indexToHide[j-14];
  }

  for (k = 0; k < hideThese.length; k++) {
     var $target = $(".wrapper div:nth-child(" + hideThese[k]+ ")");
     jQuery($target).css('opacity', '0');
  }
};

function showAll() {
  for(i = 0; i <= 25; i++){
    var $target = $(".wrapper :nth-child(" + i + ")");
    jQuery($target).css('opacity', '1');
  }
}

I'm investigating how to do the zooming part. Let me get back to you.