astro-vtbot/styles/starlight-view-transitions.css

The 👜 Bag of Tricks ✨ for Astro's View Transitions

/* Enable cross document view transitions */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* Define view transition groups */
main {
	view-transition-name: main;
	background-color: var(--sl-color-bg);
}
h1 {
	view-transition-name: title;
	width: fit-content;
}
nav.sidebar [aria-current='page'] {
	view-transition-name: current-page;
}

/* Animate the page Title */
::view-transition-old(title),
::view-transition-new(title) {
	height: 100%;
	width: auto;
}
::view-transition-group(title) {
	overflow: clip;
}

/* Animate the main area */
::view-transition-old(main),
::view-transition-new(main) {
	animation-name: none;
}
:active-view-transition-type(forward)::view-transition-new(main) {
	animation-name: main-mask-forward;
}
:active-view-transition-type(backward)::view-transition-new(main) {
	animation-name: main-mask-backward;
}
::view-transition-group(main) {
	animation-timing-function: linear;
}

@keyframes main-mask-forward {
	0% {
		clip-path: inset(0 0 0 100%);
	}
	100% {
		clip-path: inset(0);
	}
}
@keyframes main-mask-backward {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	100% {
		clip-path: inset(0);
	}
}

/* Fix stacking order */
header.header {
	view-transition-name: header;
}
mobile-starlight-toc nav {
	view-transition-name: mobile-starlight-toc-nav;
}