Intra Page View Transitions

The "Morph" transition only works with browsers that natively support view transition API.

Hash change link with parameters to same page

Normally, navigation to a hash target on the current page won't trigger view transitions. The recipe for get intra-page view transitions is as follows:

add an search parameter, e.g. ?vt to the intra-page URL, thus forcing view transitions and events.
in an astro:before-preparation listener: redefine the loader() to do nothing
in an astro:before-swap listener: redefine swap() to do nothing (besides removing old instances of .astro-route-announcer)
then choose one of the following two alternatives also for the astro-before-swap listener:
1. remove the search parameter added before from e.to.search
2. give the search parameter added above a random value by assigning to e.to.search.

The first alternative has the benefit, that the artificially introduced parameter does not show up in the browsers address bar. The second alternative has the benefit, that you also get intra-page view transitions when traversing back and forth through the browser history.

A third approach would be to link to the same page without any hash fragment as in the kangaroo demo and have some way to find out where to scroll to like this link. Because the URL does not change, no entries will be added to the browser history. When you press back you will leave the page.

Intra Page View Transitions

An heading further down the page