Smooth animated transitions between DOM states with document.startViewTransition(). Works for tab switches, image galleries, theme changes — any DOM update.
document.startViewTransition(() => { /* update DOM */ }).
The browser snapshots the old state, applies your changes, then cross-fades (or custom-animates) between old and new.
Target specific elements with view-transition-name in CSS. Zero manual animation code needed.
Toggle light/dark/auto theme with a smooth whole-page view transition. Auto follows your OS preference via prefers-color-scheme.
Welcome to the home panel. Click the tabs above to see a smooth view transition animation between panels — no JavaScript animation library needed.
Click a thumbnail to transition
<style>
/* Define animations for named transition groups */
::view-transition-old(tab-panel) {
animation: slide-out-left 0.3s ease;
}
::view-transition-new(tab-panel) {
animation: slide-in-right 0.3s ease;
}
</style>
<script>
// Tab switch — scope transition to this element only
button.addEventListener('click', () => {
tabContent.style.viewTransitionName = 'tab-panel';
const t = document.startViewTransition(() => {
tabContent.innerHTML = panels[targetId];
});
t.finished.then(() => {
tabContent.style.viewTransitionName = '';
});
});
// Theme toggle — full-page cross-fade via root group
themeBtn.addEventListener('click', () => {
document.startViewTransition(() => {
document.documentElement.setAttribute('data-bs-theme', next);
});
});
</script>