Advanced
Page transitions
Smooth page changes for multi-page sites with the browser's cross-document view transitions, in plain CSS.
The browser keeps chosen parts, such as the header and sidebar, still and fades only the content. The recipe is plain CSS in your own stylesheet, not part of Pelatform UI.
Browser support
Chrome and Edge 126 and Safari 18.2 and later animate the change, at the time of writing; other browsers switch pages at once. The transition runs only between same-origin pages that both include the rule.
CSS
Add the rule to a stylesheet that every page loads and name each part that stays still. Readers who prefer reduced motion get no transition.
/* Only readers who allow motion get the transition. */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
.site-sidebar { view-transition-name: site-sidebar; }
/* The content fades as fast as Pelatform UI's own motion. */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 120ms;
animation-timing-function: ease-out;
}Each view-transition-name must be unique on a page; a part stays still only when the next page gives it the same name. Everything else fades with the page.
The transition pseudo-elements belong to the document, outside [data-plf-root], so --plf-* variables do not reach them. The values above repeat --plf-duration-fast (120ms) and --plf-easing (ease-out).
Keep the sidebar position
This script keeps the menu’s scroll position across pages. Place it directly after the sidebar markup and replace .site-menu with your scrolling menu.
<script>
(() => {
const menu = document.querySelector('.site-menu');
const key = 'site-sidebar-scroll';
if (!menu) return;
try {
const top = Number(sessionStorage.getItem(key));
if (top) menu.scrollTop = top;
} catch {}
addEventListener('pagehide', () => {
// A hidden menu, such as on a phone, keeps the saved position.
if (!menu.getClientRects().length) return;
try { sessionStorage.setItem(key, String(Math.round(menu.scrollTop))); } catch {}
});
})();
</script>With the Sidebar component, also add data-plf-reveal-current: when the restored position hides the current page’s link, Sidebar scrolls to it.
Client-side navigation
Client-side routers, such as Astro’s, replace content without a page load: Dynamic content starts and destroys the components on every change, as Astro shows. The recipe above needs no script changes.