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:
BaseHead.astro
1
<TurnSignal directionAttribute="data-astro-transition, back, same, forward" selector="nav .internal-links a" forceTraversal />
  1. 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-groups 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.

“That’s all folks!” (return to the overview).