Same Same!

The previous demo and Astro’s transition:animate in general only knows about backward and forward, but the <TurnSignal /> also understands the concept of neither backward nor forward.

1. To have a distinct animation for staying on the same page we need to reconfigure the default a bit:

1
<TurnSignal directionAttribute="data-astro-transition, back, same, forward" selector="nav .internal-links a" forceTraversal />

2. And of course we need some additional CSS for the animation

1
  main {view-transition-class: main}
2

3
  [data-astro-transition='same']::view-transition-old(.main),
4
  [data-astro-transition='same']::view-transition-new(.main) {
5
    animation:  0.25s same;
6
  }
7
  @keyframes same {50% {transform: scale(0)}}

Click the the Blog link in the header. Seen the difference?

This example uses view-transition-class properties to address images of the <main> elements of all three pages at once. See the the@vtbag↗ pages for more examples and on how to use :active-view-transition-type(<type>) for sites that do not need the compatibility to transition:animate.

The <TurnSignal> component yet has another trick to offer: Let’s annotate view transition types at single links (or return to the overview).