When to Use
- Creating seamless navigation between pages in an SPA.
- Animating elements that change their position in the DOM.
- Implementing dark/light mode toggle animations.
When NOT to Use
- If you need support for older iOS devices (fallback gracefully).
- For highly complex, physics-based canvas animations.
Code Examples
Good: Feature-detected transition
Safely falls back to instant DOM updates if the browser lacks support.
function toggleTheme() {
if (!document.startViewTransition) {
document.body.classList.toggle('dark');
return;
}
document.startViewTransition(() => {
document.body.classList.toggle('dark');
});
}