onPageTransitionStart() hook

The onPageTransitionStart() hook, together with onPageTransitionEnd(), enables you to implement page transition animations.

// /pages/+onPageTransitionStart.js
// Environment: browser
export { onPageTransitionStart }
// Create custom page transition animations
async function onPageTransitionStart(pageContext) {
  console.log('Page transition start')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)


// /pages/+onPageTransitionStart.ts
// Environment: browser
export { onPageTransitionStart }
import type { OnPageTransitionStartAsync } from 'vike/types'
const onPageTransitionStart: OnPageTransitionStartAsync = async (
): ReturnType<OnPageTransitionStartAsync> => {
  // ...

Don't omit ReturnType<OnPageTransitionStartAsync> (don't write const onPageTransitionStart: OnPageTransitionStartAsync = async (pageContext) => {), otherwise TypeScript won't strictly check the return type for unknown extra properties: see this TypeScript playground and issue.

See API > pageContext > Typescript for more information on how to extend pageContext with your own extra properties.

Without vike-{react,vue,solid}

If you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid, then make sure to use Client Routing: the onPageTransitionStart() hook requires it (it's executed upon client-side navigation).

See also