So, part of the problem is that display: none does not transition and will immediately hide your element. You’ll want to set that to a timeout to occur after the transition properties have finished.

I’ve thrown together a quick and dirty CodePen that does a basic implementation of the “shuffle”.

Notes:

• This is by no means perfect and would require some finesse to get it all working properly.

• Depending on your implementation it may be better to .filter() your data and then apply the transition effect. This is more of an implementation of the effect than strictly the sorting.

https://codepen.io/hollyos/pen/gOaYQrz?editors=0110

In this example I’m making use of flexbox for the general layout and then utilizing transition with transform and width to re-create the minimize to center effect. It’s important to remember to set the transform-origin to match the desired location of the “close effect”

CSS

.sorted-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    background: #CCC;
    box-shadow: 0 2px 8px 1px rgba(33, 33, 33, 0.4);
    height: 150px;
    width: 25%;
    transform-origin: center center;
    transition: transform 0.45s ease, width 0.45s ease;

    &.hidden {
      transform: scale(0);
      width: 0;
    }

    &.d-none {
      display: none;
    }
  }
}

JS

const resetItem = (element) => {
  element.classList.remove('d-none');

  // Slight delay to allow for the element to be "added" back in
  setTimeout((scopedElement) => {
    scopedElement.classList.remove('hidden');
  }, 1, element);
};

const hideItem = (element) => {
  element.classList.add('hidden');

  // Delay display: none, since it doesn't transition.
  setTimeout((scopedElement) => {
    scopedElement.classList.add('d-none');
  }, 300, element);
}

(function() {
  const nav = document.querySelector('nav');

  nav.addEventListener('click', (event) => {
    const { group } = event.target.dataset;

    // A catch-all for anything that's not group related to reset the list sort.
    if (!group) {
      document.querySelectorAll('.sorted-list > li').forEach(resetItem);

      return;
    }

    // Ensure "visible" elements are visible
    document.querySelectorAll(`.sorted-list > .group-${group}`).forEach(resetItem);

    // Hide all other elements
    document.querySelectorAll(`.sorted-list > li:not(.group-${group})`).forEach(hideItem);
  });
})();

There is Not That much going on the website Make Sure following Happens.

You have a Proper data Structure of Objects so that you will be Able to Filter the content out Something Like

[
{
“type”: “intro”
“elmid”: “something”
}
]

1. Create Two Classes One for Hide, one for Showing Up, Add Position Animation with delay to all Elements
2. Filter Content with Array.filter and add or Remove Classes.
3. Make Suore you add event listner to parent rather then each element for Performance.

if you will open their Page This is what they are doing..

I am trying to shuffle div with a click of button with a dissolve animation in HTML5.

Example of what I am looking for is similar to this site

When you will scroll on this page so there will be few links i.e. All, Intro, Solution. If I click on any link it animates and shuffle all small divs.

I have tried to develop horizontal divs and on button click I can hide those but it’s not working similar to this one:

DEMO

I tried to shuffle on button click with this code:

function shuffle(){
document.getElementById("b").style="display: none";
document.getElementById("a").style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 500ms ease 0s, transform 300ms ease 0s;";
}

It’s hiding first div but, not applying any animation on other.