<div class="buttons-container">
  <div>Show:&nbsp;</div>
  <div>
    <label for="all"><input type="checkbox" id="all" checked> All</label>
    <label for="green"><input type="checkbox" id="green" class="filter" checked> Green</label>
    <label for="orange"><input type="checkbox" id="orange" class="filter" checked> Orange</label>
    <label for="purple"><input type="checkbox" id="purple" class="filter" checked> Purple</label>
  </div>
</div>

<div class="container">
  <div class="item green"></div>
  <div class="item orange"></div>
  <div class="item purple"></div>
  <div class="item orange"></div>
  <div class="item green"></div>
  <div class="item purple"></div>
  <div class="item green"></div>
  <div class="item purple"></div>
</div>

<a href="https://greensock.com/"><img src="https://assets.codepen.io/16327/hero-logo.svg" class="logo" /></a>
body { text-align: center; }
.buttons-container {
  padding: 2rem 0;
  display: inline-flex;
  text-align: left;
  font-size: 1.35em;
}
label {
  display: block;
}

.container {
  width: 96vw;
  margin-left: 2vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  display: inline-flex;
  width: 200px;
  height: 150px;
  margin: 5px;
}

.logo {
  position: absolute;
  width: 60px;
  bottom: 20px;
  right: 30px;
}

.purple {
  background-color: rgb(125, 70, 150)
}
const allCheckbox = document.querySelector('#all'),
      filters = gsap.utils.toArray('.filter'),
      items = gsap.utils.toArray('.item');

function updateFilters() {
  const state = Flip.getState(items), // get the current state
        classes = filters.filter(checkbox => checkbox.checked).map(checkbox => "." + checkbox.id),
        matches = classes.length ? gsap.utils.toArray(classes.join(",")) : classes;

  // adjust the display property of each item ("none" for filtered ones, "inline-flex" for matching ones)
  items.forEach(item => item.style.display = matches.indexOf(item) === -1 ? "none" : "inline-flex");
 
	// animate from the previous state
	Flip.from(state, {
		duration: 0.7,
		scale: true,
		ease: "power1.inOut",
		stagger: 0.08,
    absolute: true,
    onEnter: elements => gsap.fromTo(elements, {opacity: 0, scale: 0}, {opacity: 1, scale: 1, duration: 1}),
    onLeave: elements => gsap.to(elements, {opacity: 0, scale: 0, duration: 1})
	});
  
  // Update the all checkbox:
  allCheckbox.checked = matches.length === items.length; 
}

filters.forEach(btn => btn.addEventListener('click', updateFilters));
allCheckbox.addEventListener('click', () => {
  filters.forEach(checkbox => checkbox.checked = allCheckbox.checked);
  updateFilters();
});
View Compiled

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://assets.codepen.io/16327/Flip.min.js