How can I disable animations on a specific mobile device in Webflow?

To disable animations on a specific mobile device in Webflow, you’ll need to use custom code, since Webflow’s native interactions panel doesn’t allow device-specific toggling beyond global breakpoints.

1. Decide Which Device to Target

• Determine the device or screen size (e.g. iPhone SE, small Android phones) using its max-width or device name.
• Use media queries to target approximate screen sizes common for that device.

2. Wrap Animations with Conditional Classes

• Apply a distinct class name to elements whose animations you want to disable, such as .animated-element.
• Set up your interactions on this class as usual in Webflow.

3. Use Custom Code to Remove Animation Classes or Trigger Conditions

• Add the following code in Page Settings > Before tag section:

<script>  window.addEventListener('DOMContentLoaded', function () {    // Replace max-width with the screen width you want to target    if (window.matchMedia("(max-width: 375px)").matches) {      // Remove animation classes or disable triggers      const elements = document.querySelectorAll('.animated-element');      elements.forEach(el => {        el.classList.remove('animated-element');      });      // Or disable Webflow IX animations      Webflow.destroy(); // Optional: Disables all interactions    }  });</script>

Important Notes:

• Webflow.destroy() disables all interactions — use with caution.
• To target specific devices precisely (like an iPhone SE), base your media query on its screen width (max-width: 375px).
• Removing the animation class prevents the element from triggering the Webflow interaction attached to that class.

4. Optionally Use CSS to Disable Subtle Animations

• In the same custom code area, you can add a style block:

<style>  @media screen and (max-width: 375px) {    .animated-element {      transition: none !important;      animation: none !important;    }  }</style>

This completely halts CSS-based animations on that class within the defined screen range.

Summary

You can disable animations on a specific mobile device in Webflow by detecting screen width with custom code, then removing animation classes or disabling interactions. Webflow’s native tools don’t support per-device animation toggles, so leveraging media queries and JavaScript is essential.