JSFiddle - React, Tailwind, and code Playground

by groenroos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script src="https://groenroos.fi/horiz.js"></script>
<div id="gallery-resizer">
  <div id="gallery">
    <ul id="original">
      <li data-id="item1" class="original evolved">1</li>
      <li data-id="item15" class="evolved">1b</li>
      <li data-id="item2" class="original evolved">2</li>
      <li data-id="item3" class="original">3</li>
      <li data-id="item4" class="original">4</li>
      <li data-id="item5" class="evolved">5</li>
      <li data-id="item6" class="original evolved">6</li>
      <li data-id="item7" class="original evolved">7</li>
      <li data-id="item8" class="original">8</li>
      <li data-id="item9" class="original">9</li>
      <li data-id="item10" class="original">10</li>
      <li data-id="item11" class="original evolved">11</li>
      <li data-id="item12" class="original evolved">12</li>
      <li data-id="item17" class="evolved">17</li>
      <li data-id="item13" class="original evolved">13</li>
      <li data-id="item14" class="evolved">14</li>
      <li data-id="item16" class="evolved">16</li>
      <li data-id="item18" class="evolved">18</li>
      <li data-id="item19" class="evolved">19</li>
      <li data-id="item20" class="evolved">20</li>
    </ul>
  </div>
</div>

<button>Toggle</button>

CSS

html, body {
  margin: 0;
  overflow: hidden;
  font-size: 0;
}

.hidden {
  display: none;
}

button {
  width: 120px;
  height: 30px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

#gallery ul, #gallery li {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

#gallery li {
  width: 60px;
  height: 120px;
  margin: 5px;
  background: #f3f3f3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
}

#gallery {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 130px;
  transform: translate(-50%, -50%);
  transition: width 750ms ease-in-out;
}

#gallery-resizer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  transform-origin: 50% 50% !important;
  transition: transform 750ms ease-in-out;
}

JavaScript

var evolved = false;

var mutate = function(){
  $('#original').isotope({ filter: evolved ? ".evolved" : ".original", layoutMode: 'horiz', transitionDuration: '0.75s' });
  
  var width = $('#original li' + (evolved ? ".evolved" : ".original")).length * 70;
  console.log(width);
  $('#gallery').width( width );
  $('#gallery-resizer').css("transform", "scale(" + ($(window).outerWidth() - 80) / width + ")");
}

$(document).ready(function(){
	mutate();
});

$(window).resize(function(){
  var width = $('#source li').length * 70;
	$('#gallery-resizer').css("transform", "scale(" + ($(window).outerWidth() - 80) / width + ")");
})

$("button").click(function(){
	evolved = !evolved;
	mutate();
});