Animating the mushroom guide filter

Creating a similar cross-fading animation when we filter our mushrooms is really easy as well!

Anytime we call our filterCards() function, we want to do it like this:

document.startViewTransition(() => filterCards());

Easy-peasy!

Supporting all browsers

Doing the above works, but only if your browser supports view transitions.

If it doesn't, then document.startViewTranstion() will never fire, an that means the filterCards() will never work.

There's an easy fix for this though:

if (!document.startViewTransition) {
  filterCards();
  return;
}
document.startViewTransition(() => filterCards());

This means if a browser doesn't support view transitions, it'll keep working the old way, and if it does, it'll add the animation... in other words, it's a progressive enhancement!