Hi @lament hearth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#ViewTransitions does not work on mobile.
icy hamletBOT
Hmm, I don't know enough to give you a confident answer yet. However, based on the information provided, it seems like you might need to adjust your scripts to work with Astro's ViewTransitions during page navigation.
Astro's ViewTransitions feature uses client-side routing, which means that some scripts may not re-run after page navigation like they do with full-page browser refreshes. You can listen for certain events during client-side routing and fire events when they occur. Specifically, you might need to hook into two events: astro:page-load and astro:after-swap.
For example, if you have a script controlling a mobile menu component, you would need to make it available after navigating to a new page. You can do this by adding an event listener for the astro:page-load event, which runs at the end of page navigation. Here's an example of how you might do this:
document.addEventListener('astro:page-load', () => {
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
});
});