What is the name of this effect?

Question

I would like to know the name of this effect.

Where has ALL, IDENTITY, LOGO and PRINT. By clicking on each item, the images are separated by categories.

Click here to access

Answer 1

you can achieve this effect using different combinations of Transform, Transition and Animation.

below follows a complete example:

var content = document.getElementById("container");
var content = document.getElementById("content");
var buttons = document.querySelectorAll("#menu input[data-color]");

var random = function (min, max) {
  return Math.floor(Math.random() * max) + min;
}

var width = 240;
var boxes = [];
var cores = ["teal", "indigo", "deep-orange", "blue-gray"];
for (var indice = 0; indice < 36; indice++) {
  var cor = cores[indice % 4];
  var box = document.createElement("div");
  box.classList.add("box");
  box.classList.add(cor);
  box.style.width = (width - 10) + "px";
  box.style.height = random(120, 180) + "px";
  content.appendChild(box);
  boxes.push(box);
}

var currentWidth = 0;
var onWindowResize = function (force) {
  var newWidth = window.innerWidth - window.innerWidth % width;
  if (currentWidth != newWidth || force) {
    content.style.width = newWidth + "px";
    currentWidth = newWidth;

    var colunas = [];
    var limite = currentWidth / width;
    for (var indice = 0; indice < limite; indice++) {
      colunas.push(0);
    } 

    boxes.forEach(function (box, indice) {
      if (!box.classList.contains("hide")) {
        var minimo = Math.min.apply(null, colunas);
        var indice = colunas.indexOf(minimo);
        console.log(box.offsetHeight);
        box.style.top = colunas[indice] + "px";
        box.style.left = (width * indice) + "px";      
        colunas[indice] += box.offsetHeight + 10;
      }
    });

    console.log(colunas);
  }	
}

var onColorClick = function (event) {
  var cor = event.target.dataset.color;
  var todos = !cor;
  boxes.forEach(function (box, indice) {
    if (!todos && !box.classList.contains(cor)) {
      box.classList.remove("show");
      box.classList.add("hide");
    } else if (box.classList.contains("hide")) {
      box.classList.remove("hide");
      box.classList.add("show");
    }    
  });
  onWindowResize(true);
}

window.addEventListener("resize", function () {
  onWindowResize(false);
});

[].forEach.call(buttons, function (button, indice) {
  button.addEventListener("click", onColorClick);	
});

onWindowResize(false);

html, body {
  overflow: auto;
}

#menu {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 40px;
  padding: 10px;
  text-align:center;
  background-color: gainsboro;
  box-shadow: 0px 0px 10px black;
  box-sizing: border-box;
}

#container {
  position: fixed;
  overflow: auto;
  top: 40px;
}

#content {
  position: absolute;
  top: 0px;
}

#container, #content {
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
}

.box {
  position: absolute;
  border-radius: 5px;
  box-shadow: 0px 0px 5px black;
  margin: 5px;
  transition-property: top, left;
  transition-duration: 0.5s;
  transition-timing-function: linear;  
  
  -webkit-transition-property: top, left;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;  
}

.hide {
  animation: hide 0.5s linear;
  animation-fill-mode: forwards;
  
  -webkit-animation: hide 0.5s linear;
  -webkit-animation-fill-mode: forwards;
}

.show {
  animation: hide 0.5s linear;
  animation-fill-mode: forwards;
  
  -webkit-animation: show 0.5s linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes hide {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes show {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@-webkit-keyframes hide {
  0% { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(0); }
}

@-webkit-keyframes show {
  0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1); }
}

.teal {
  background-color: #009688
}

.indigo {
  background-color: #3F51B5
}

.deep-orange {
  background-color: #FF5722
}

.blue-gray {
  background-color: #607D8B
}

<div id="menu">
  <input type="button" data-color="" value="Todas" />
  <input type="button" data-color="teal" value="Teal" />
  <input type="button" data-color="indigo" value="Indigo" />
  <input type="button" data-color="deep-orange" value="Deep Orange" />
  <input type="button" data-color="blue-gray" value="Blue Gray" />
</div>
<div id="container">
  <div id="content">

  </div>
</div>

to make the "boxes" decrease until they disappear, I used a animation combined with a transform: scale(n).

to move the "boxes", I used a transition and set up the top and left in hand.

as bonus also made the example Responsive, so try to increase and decrease the size of your browser window.