Custom Transitions
Bring your own animation to <ViewTransitions /> with custom={{ in, out }} — raw @keyframes bodies that drive the page you leave and the page you land on. Here the card does a funky 3D spin on every navigation.
Page 2
Each navigation is a full page load — the card does a custom spin while the rest of the page swaps instantly.
<script lang="ts">
import { ViewTransitions } from 'mochi-framework/components';
import SpinCard from './SpinCard.svelte';
</script>
<ViewTransitions
custom={{
out: 'to { transform: rotate(540deg) scale(0); opacity: 0 }',
in: 'from { transform: rotate(-540deg) scale(0); opacity: 0 }',
}}
easing="cubic-bezier(0.68, -0.55, 0.27, 1.55)"
duration={600}
regions="card"
/>
<SpinCard page={1} />