Home

Navigate using the links above. The About link uses the default fade transition. The Work link uses the slide transition when the target path is /work, via a condition on that transition (no flyva-transition on the link). Per-link flyva-options still passes direction.

refStack demo

This element is registered via useRefStack('hero', ref). The default transition accesses it with globalGetRefStackItem('hero') and scales it down during leave. Navigate away and watch it shrink independently from the content fade.

What's being tested

  • Default transition — FlyvaLink without explicit transition name falls back to defaultTransition
  • Transition selection — Work nav uses slideTransition matched by condition on the target URL; project cards use explicit expandTransition
  • refStack — The hero block registers itself via useRefStack. The default transition accesses it via globalGetRefStackItem and animates it separately during leave
  • Nuxt hooks — page:start and page:finish drive the leave/enter lifecycle natively through FlyvaPage, no manual wiring needed