Fancying up the animation

We're able to do a lot more than simply cross-fade elements in and out.

When we're filtering elements like this, if we go from the All filter to something else, a lot of the elements are moving.

For the browser to be able know that though, we need to give each element a unique view-transition-name.

This is a CSS property, and it can be a little cumbersome to manually add it to every element.

For this to work, we need JavaScript anyway, so we can loop over the cards and apply a unique name to each element like this:

cards.forEach((card, index) => {
  // You can use a data attribute if cards have unique IDs
  const mushroomId = `mushroom-${index + 1}`;
  card.style.viewTransitionName = `mushroom-card-${mushroomId}`;
});