View Transition basics

View transitions are what are going to allow us to fancy up the filtering of our cards in the mushroom guide.

First off, there are two types of view transitions:

  • Same-document view transitions
  • Cross-document view transitions

As of the time of writing, support isn't the best, but they are a fantastic progressive enhancement.

Same-document view transitions

Same-document view transitions allow for a relatively simple way to animate changes to your page when you make changes a page, like we're currently doing with our Mushroom Guide.

Cross-document view transitions

Cross-document view transitions are for the transition from one page in your site to another, like when navigating from our home page to our second page.

They are a very deep topic

We're only going to scratch the surface of both types of view transitions.

The basics of them are both are easy to implement, but there is a lot more to both of these than we have time to cover in this course.