#Is there a way to disable astro:transitions for mobile view?

5 messages · Page 1 of 1 (latest)

limpid plinth
#

I tried this solution but got an error.
Adding a Script to Detect Mobile View
<script>
// Function to check if the device is mobile
function isMobile() {
return window.innerWidth <= 768; // Adjust the breakpoint as needed
}

// Disable transitions for mobile devices
if (isMobile()) {
console.log("Mobile device detected. Disabling transitions.");
document.documentElement.setAttribute("data-transitions", "disabled");
} else {
console.log("Desktop device detected. Enabling transitions.");
document.documentElement.setAttribute("data-transitions", "enabled");
}

// Optional: Re-check on window resize
window.addEventListener("resize", () => {
if (isMobile()) {
document.documentElement.setAttribute("data-transitions", "disabled");
} else {
document.documentElement.setAttribute("data-transitions", "enabled");
}
});
</script>
Then conditionally apply transitions in layout file (e.g., Layout.astro), used the data-transitions attribute to conditionally apply transitions. For example:

import { ViewTransitions } from "astro:transitions";

<html>
<head>
<!-- Conditionally include ViewTransitions -->
{document.documentElement.getAttribute("data-transitions") === "enabled" && (
<ClientRouter /> )} // ❌ Error!
</head>
<body>
<slot /> <!-- Your page content goes here -->
</body>
</html>
So how could I conditionaly apply <ClientRouter /> depending on the breakingpoint?

carmine bridgeBOT
#

Hi @limpid plinth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The approach you've tried won't work as-is because Astro components are server-side rendered, meaning you can't access client-side JavaScript variables or DOM elements during the component's initial render.

However, there is a way to conditionally apply the <ClientRouter /> component based on the viewport width. Here's a solution that should work:

  1. First, use the <ClientRouter /> component unconditionally in your layout file:
---
import { ClientRouter } from "astro:transitions";
---

<html>
  <head>
    <ClientRouter />
  </head>
  <body>
    <slot />
  </body>
</html>
  1. Then, you can disable the transitions for mobile devices using CSS media queries. Add the following script to your layout file or a global script:
<script is:inline>
  document.addEventListener('astro:page-load', () => {
    function disableTransitionsForMobile() {
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.documentElement.setAttribute('data-astro-transition', 'none');
      } else {
        document.documentElement.removeAttribute('data-astro-transition');
      }
    }

    disableTransitionsForMobile();
    window.addEventListener('resize', disableTransitionsForMobile);
  });
</script>

This script uses the astro:page-load event, which is part of Astro's View Transitions lifecycle events. It sets the data-astro-transition attribute to "none" for mobile devices, which disables the transitions.

The transition:animate="none" value is mentioned in the Built-in Animation Directives section of the Astro documentation:

#

none: Disable the browser's default animations. Use on a page's <html> element to disable the default fade for every element on the page.

By setting this attribute dynamically based on the viewport width, you can effectively disable transitions for mobile devices while keeping them enabled for larger screens.

Remember to adjust the max-width value in the media query to match your desired breakpoint for mobile devices.

This solution allows you to keep the <ClientRouter /> component in place while dynamically controlling the transitions based on the viewport width.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@limpid plinth Kapa.ai is still learning and improving, please let me know how I did by reacting below.