Different Page Transitions For Different Circumstances

"But I just recently saw the DOM events in JavaScript and how they can be used to set a "type". So check out the events first: window.addEventListener('pageswap', async (e) => { if (e.viewTransition) { } } window.addEventListener('pagereveal', async (e) => { if (e.viewTransition) { } } You can do anything you might want in there, but an especially interesting thing to me is that you can set the view transition type, and do so conditionally."

"window.addEventListener("pagereveal", async (e) => { if ( e.viewTransition && document.location.pathname === "/shows" ) { e.viewTransition.types.add("toShowsPage"); } }); That toShowsPage is just an arbitrary name we're making up to use in CSS to customize the animation when it's set."

"We've got a custom type being set, but let's set up the default first. Something like this is neat: In my example here, it assumes a <main> content area with view-transition-name: main; so that is the element being targeted specifically here. Now when I move pages (by just clicking regular ol' links) I get this effect: Using the Custom Type for a Custom Animation When the "Shows" link is clicked and the /shows page is loaded, we're setting the "toShowsPage" type, and this is the magic moment we can use it in CSS: html:active-view-transition-type(toShowsPage) { &::view-transition-new(main) { a"

The pageswap and pagereveal DOM events expose a viewTransition object that can be inspected and modified during navigation. The viewTransition.types collection can be used to add an arbitrary type name for a specific navigation, allowing conditional selection based on URL or other runtime checks. Apply view-transition-name to targeted elements (for example, main) for default transitions, and add custom types (for example, toShowsPage) when a particular route is detected. Use the html:active-view-transition-type(...) selector and ::view-transition-new(...) / ::view-transition-old(...) pseudo-elements in CSS to define custom animations for those conditional types.

Read at Frontendmasters