The interesting points in this demo are:
-
This demo consists of a single page. While the navigation to the same page does not
trigger view transitions if the URL ends with a hash, it does if the URL does not contain
a hash fragment.
(Click on the kangaroo to see the transitions in action)
-
As the page is already loaded, we do not need to load it again. The loader function in the
astro:before-preparation event is overwritten with an empty function. Thus we
do not load any HTML but just keep what we have.
-
The
swap property of the astro:before-swap event is also overridden.
In the new function, we just look for the kangaroo and nudge it a bit around. And it selects
the next item to display from this list.
On browsers that support view transitions, the kangaroo will smoothly transition to its new
position. On others it will just jump around.