Back is Back

This demo ony differs in two lines from the previous one:

1
---
2
import TurnSignal from "astro-vtbot/components/TurnSignal.astro";
3
---
4
...
5
<TurnSignal />
6
...

Now clicking Home or About in the header above and then using the browsers back button slides in the page from the left.

The <TurnSignal /> generates the same data-astro-transition="back" values as the <ViewTransition /> component, but without the overhead of the client side router. With that information, the CSS generated by transition:animate can again work in both directions.

The <TurnSignal /> also generates view transition types that can be used with the :active-view-transition-type() pseudo-classes. For more details↗ visit the @vtbag pages.

On this page, all clicks on links in the header generate forward animations. Wouldn’t it be nice to have Home to the left of Blog and About to the right?

Let’s do this in the next demo (or return to the overview).