Lifecycle hooks

This page demonstrates useFlyvaLifecycle in non-blocking (default) and blocking ( blocking: true) modes, plus FlyvaLink callback props.

Passive mode log

Events logged by useFlyvaLifecycle (non-blocking, fire-and-forget).

Navigate to see events...

Blocking lifecycle (blocking: true) progress bar

A progress bar animated via useFlyvaLifecycle with blocking: true. The transition awaits this animation before proceeding. It sits above the lifecycleLinkOverlayTransition black overlay ( z-index).

FlyvaLink callback props

Indicator turns on at onBeforeLeave and off at onAfterEnter. The link uses a dedicated black overlay transition instead of the default content fade.

Go to About (with indicator)

Lifecycle classes on <html>

flyva-running stays on for the whole swap. Phase tokens flyva-leave-* / flyva-enter-* follow Vue-style steps; flyva-pending covers the gap after leave and before enter so the nav border animation stays continuous. data-flyva-transition on <html> is the transition key — the playground hides the nav shimmer for overlayTransition. The demo wait overlay uses html.flyva-running::after in global CSS, aligned with flyva-running on <html>.