`+onPageTransitionStart()` hook

Environment: client

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

// /pages/+onPageTransitionStart.js
// Environment: client
 
export async function onPageTransitionStart(pageContext) {
  console.log('Page transition start')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.add('page-transition')
}

// /pages/+onPageTransitionStart.ts
// Environment: client
 
import type { PageContextClient } from 'vike/types'
 
export async function onPageTransitionStart(pageContext: PageContextClient) {
  console.log('Page transition start')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.add('page-transition')
}

JavaScript

TypeScript

// /pages/+onPageTransitionEnd.js
// Environment: client
 
export async function onPageTransitionEnd(pageContext) {
  console.log('Page transition end')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.remove('page-transition')
}

// /pages/+onPageTransitionEnd.ts
// Environment: client
 
import type { PageContextClient } from 'vike/types'
 
export async function onPageTransitionEnd(pageContext: PageContextClient) {
  console.log('Page transition end')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.remove('page-transition')
}

JavaScript

TypeScript

The onPageTransitionStart() hook is called right after routing, before Vike loads the next page's code and data, so that your animation starts as early as possible. Consequently, pageContext doesn't contain the next page's Page, data, and configuration yet. See API > Hooks > Lifecycle.

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).

+onPageTransitionStart() hook

Without vike-{react,vue,solid}

See also

`+onPageTransitionStart()` hook

Without `vike-{react,vue,solid}`