{tabs.map((tab) => (
))}
);
}
```
---
## View Transitions API
### Same-Document Transitions
```ts
function navigateTo(newContent: () => void) {
if (!document.startViewTransition) {
newContent();
return;
}
document.startViewTransition(newContent);
}
```
### Cross-Document Transitions
```css
/* In both pages — opt in */
@view-transition {
navigation: auto;
}
```
### `view-transition-name` for Shared Elements
```css
.hero-image {
view-transition-name: hero-image;
}
/* Customize the cross-fade */
::view-transition-old(hero-image) {
animation: fade-out 0.3s ease-out;
}
::view-transition-new(hero-image) {
animation: fade-in 0.3s ease-in;
}
```
### Progressive Enhancement Pattern
```ts
async function transitionTo(url: string) {
if (!document.startViewTransition) {
window.location.href = url;
return;
}
await document.startViewTransition(async () => {
const res = await fetch(url);
const html = await res.text();
const doc = new DOMParser().parseFromString(html, "text/html");
document.body.replaceWith(doc.body);
history.pushState({}, "", url);
});
}
```
---
## Route-Level Animation Orchestration
### Exit → Enter Sequencing
The fundamental rule: the exiting page must fully finish before the entering page starts, or both must overlap with a crossfade. Avoid flash by keeping the exiting element mounted until its animation completes.
### AnimatePresence in Next.js (App Router)
```tsx
// app/layout.tsx
"use client";
import { AnimatePresence } from "framer-motion";
import { usePathname } from "next/navigation";
export default function RootLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
return (
{/* Base layer */}
{tabs.map(renderTab)}
);
}
```
### Drag-Comparison Slider
```tsx
function CompareSlider({ before, after }: { before: string; after: string }) {
const [pos, setPos] = useState(50); // percent
return (
- {tabs.map(renderTab)}
{
const rect = e.currentTarget.getBoundingClientRect();
setPos(((e.clientX - rect.left) / rect.width) * 100);
}}
>
);
}
```
---
## Blur-to-Mask Crossfades
Use a short `filter: blur()` during state transitions to bridge the visual gap between two overlapping states - it softens the hard edge that appears when opacity alone creates a ghost.
```tsx