flip

3D flip effect

🎬 Interactive Demo

This page uses the flip transition

Navigate to another page to see the animation

Try Another Transition:

page fade-scale slide-right slide-left slide-up zoom blur rotate bounce elegant

View All

📝 Code Example

To use this transition in your page:

<script setup lang="ts">
definePageMeta({
-  pageTransition: 'my-custom' // use a string name here when authoring the page
+  pageTransition: { name: 'my-custom' } // prefer object form when authoring the page
})
</script>

Or navigate programmatically:

const { navigateWithTransition } = usePageTransitions()

await navigateWithTransition('/your-page', currentTransition.name)

✨ Features

SSR Compatible

Works perfectly with server-side rendering

Hardware Accelerated

Smooth 60fps animations using GPU

Accessible

Respects user motion preferences

Type Safe

Full TypeScript support