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;
	}
}

main {
	background-color: var(--sl-color-bg);
}

:active-view-transition-type(forward, backward) {
	/* Define view transition groups */
	main {
		view-transition-name: main;
	}
	h1 {
		view-transition-name: title;
		width: fit-content;
	}
	nav.sidebar [aria-current='page'] {
		view-transition-name: current-page;
	}

	/* Fix stacking order */
	header.header {
		view-transition-name: header;
	}
	mobile-starlight-toc nav {
		view-transition-name: mobile-starlight-toc-nav;
	}
	&::view-transition-new(header),
	&::view-transition-old(header),
	&::view-transition-new(mobile-starlight-toc-nav),
	&::view-transition-old(mobile-starlight-toc-nav) {
		animation-name: none;
	}
	/* Animate the page Title */
	&::view-transition-old(title),
	&::view-transition-new(title) {
		height: 100%;
		width: auto;
	}
	&::view-transition-group(title) {
		overflow: clip;
	}

	&::view-transition-old(main),
	&::view-transition-new(main) {
		animation-name: none;
	}
	&::view-transition-group(main) {
		animation-timing-function: linear;
	}
}
: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;
}

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