Where to set up disabling animations on mobile

[jchabrowski]

As here I would like to set up sal to disable animations below ceratin viewport (for example 768px). Where should I include it in a gatsby project?

I feel like it should be placed inside gatsby-browser.js, but then "sal is not defined".

Example code, copied from the link provided above.

const animation = sal();

const switchAnimations = () => {
  if (window.innerWidth < 768) {
    animation.reset({
      selector: 'animated-element',
      once: true,
    });
  } else {
    animation.reset({
      // some other options
    });
  }
};

switchAnimations();
window.addEventListener('resize', switchAnimations);

[TheDevDoctor]

I agree this would be a useful feature, I'd like to disable the animations on mobile devices.