Here’s why I’m excited about View Transition Types: directional transitions.

Imagine clicking the next or previous page in a pagination sequence. Depending on whether you are going up or down the sequence, you might want to slide the contents in a different direction.

Here’s a recording of this “Two-Phase View Transition” concept.

The flow goes like this:

- Click a link
- VT into the loading screen
- Fetch the data of the new page in the background
- VT into the new page

There’s a new type of CSS scroll-state query coming: “scrolled”.

This one remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.

With View Transitions now being Baseline Newly available, and the View Transition API consisting of various features, it can be confusing to know what is supported in which browser versions.

To help with that, I created this VT Feature Explorer (powered by View Transitions)

web.dev/blog/same-do...