SlideTransition

The framework can run an enter/exit animation between every page change. There is no default — pages snap unless you declare a SlideTransition. For where to declare one and how precedence works, see Transition; this page is the schema plus a reusable set of examples.

prefers-reduced-motion: reduce is honored automatically — you don't write a fallback.

Schema

SlideTransition

TransitionPhase

MorphTransition

Direction hook

The framework writes two values on the transition wrapper so a single keyframe can mirror itself on backward navigation:

Use --osd-dir inside calc():

{ transform: 'translateX(calc(var(--osd-dir, 1) * 8px))' },
{ transform: 'translateX(0)' },

Most decks shouldn't mirror on backward navigation — reach for the direction hook only when the motion has a literal direction (a horizontal advance, a chapter sweep).

Morph

morph enables MorphElement matching: wrap the same visual object on two pages with the same id and the runtime animates it across the cut instead of fading it. Marked elements that exist on only one of the two pages fade in or out automatically.

Use the object form when the morph needs its own timing:

export const transition: SlideTransition = {
  duration: 900,
  enter: { keyframes: [{ opacity: 0.35 }, { opacity: 1 }] },
  exit: { keyframes: [{ opacity: 1 }, { opacity: 0.35 }] },
  morph: {
    duration: 900,
    easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
  },
};