remove-webflow-interactions.js

// Grab the prefers reduced media query.
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
const locationSection = document.querySelector("#location");
const headingAnimation = document.querySelector("#heading");
const fourUp = document.querySelectorAll(".four-up-image");
const fourUpOne = document.querySelector(".four-up-image._1");
const fourUpTwo = document.querySelector(".four-up-image._2");
const fourUpThree = document.querySelector(".four-up-image._3");
const fourUpFour = document.querySelector(".four-up-image._4");
const locationLarge = document.querySelector("#location-large");

// Check if the media query matches or is not available.
if (!mediaQuery || mediaQuery.matches) {
  console.log("Reduced motion is enabled.");
  delete locationSection.dataset.wId;
  delete headingAnimation.dataset.wId;
  headingAnimation.removeAttribute("style");
  fourUp.forEach((image) => {
    delete image.dataset.wId;
    image.removeAttribute("style");
  });
  fourUpOne.classList.remove("_1");
  fourUpTwo.classList.remove("_2");
  fourUpThree.classList.remove("_3");
  fourUpFour.classList.remove("_4");
  locationLarge.removeAttribute("style");
  delete locationLarge.dataset.wId;
} else {
  console.log("Reduced motion is disabled.");
}

// Ads an event listener to check for changes in the media query's value.
mediaQuery.addEventListener("change", () => {
  if (mediaQuery.matches) {
    console.log("Reduced motion is enabled.");
  } else {
    console.log("Reduced motion is disabled.");
  }
});