Logo
Sazala Nuxt Utils Playground
Dashboard

Page Transitions

Explore different page transition animations - all SSR compatible

✨ Available Transitions

Click on any transition below to see it in action. All transitions are:

  • ✅ SSR Compatible - Works with server-side rendering
  • ✅ Hardware Accelerated - Uses GPU for smooth animations
  • ✅ Accessible - Respects prefers-reduced-motion
  • ✅ Type Safe - Full TypeScript support

page

Default fade transition

Try it

fade-scale

Fade with subtle scale

Try it

slide-right

Slide from right to left

Try it

slide-left

Slide from left to right

Try it

slide-up

Slide from bottom to top

Try it

zoom

Zoom in/out effect

Try it

blur

Blur transition

Try it

rotate

Rotate with fade

Try it

bounce

Bouncy entrance

Try it

flip

3D flip effect

Try it

elegant

Elegant slide fade (recommended)

Try it

📖 How to Use

Method 1: Using definePageMeta (Recommended)

definePageMeta({
  pageTransition: { name: 'elegant', mode: 'out-in' } // or any transition name
})

Method 2: Using the Composable

const { navigateWithTransition } = usePageTransitions()

// Navigate with specific transition
await navigateWithTransition('/about', 'zoom')

Method 3: Custom Transition in nuxt.config

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'elegant', mode: 'out-in' }
  }
})
Back to Home