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 } so the transition awaits this animation. The bar is portaled to <body> so the page fade does not affect its opacity.

FlyvaLink callback props

Indicator turns on at onBeforeLeave and off at onAfterEnter.

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 hooks and before enter (so the nav border animation never drops). data-flyva-transition on <html> is the transition key (e.g. overlayTransition) — the playground hides the nav bar shimmer for overlay. The demo wait overlay uses html.flyva-running::after in global CSS, aligned with the same lifecycle classes.