Consider page transitions

[mdings]

Hey @loteoo ,

Thanks again for the efforts towards v2! I'm still looking for a way to have page transitions though; perhaps using some kind of hook mechanics. Ideally I would like to have a fade out when the route changes and a fade in whenever the external data is loaded. How about providing router hooks, like beforePageChange & afterPageChange for instance?

Cheers!

[loteoo]

Hey @mdings!

Thanks for your interest in hyperstatic ❤️ ! Sorry for the delayed response, I wanted to come back with a full answer :)

So at the time that you created the issue, we could already use the provided onRouteChangedsubscription to do "fade-in" page animations, but "fade-out" was indeed still a problem.

To better support "fade-out" animations, I added a navigationDelay option to the config, which is the default delay to the navigate effect + a onRouteChangeStart subscription.

The navigate effect now emits an event at the start of the effect (you can subscribe to this via the new onRouteChangeStart subscription), and will trigger the page change at the end of the delay (onRouteChanged)

Here's an example for adding fade-out and fade-in in the hyperstatic-starter template. It uses plain CSS transitions, toggled via state, but you could also use custom effects to do the DOM manipulations necessary for the animation.

Diff: https://github.com/loteoo/hyperstatic-starter/compare/example/page-transitions

Result:

I plan to add a "Guides" page in the docs to better document this, but for now I hope this helps!!

[mdings]

Amazing! Thanks @loteoo