How do I disable a javascript animation for mobile devices?

Site URL: http://www.cherrytreeinteriordesign.com

Hi all,

I have added a javascript animation to my header, but I need to disable it on mobile devices because it just makes the menu not appear. The code in question is below:

<script>
(function(){
    window.addEventListener('load', function() {
    var headerElements = document.querySelectorAll('header a')

    function fadeIn(element, time, delay) {
      var keyframes = {opacity: [0,1]};
      var timing = {
        duration: time,
        fill: 'both',
        easing: 'ease',
        delay: delay
      };
  
     element.animate(keyframes, timing)
    }

    function animateElements(element,animation,time,delay) {
        element.forEach((item,index) => {
            var delays = index*delay;
            item.style.display = 'inline-block';
            animation(item,time,delays)
        })
    };
    //Call animateElements function and set your timing and delay.
    animateElements(headerElements,fadeIn,2000,300);  
    })
})()
</script>

I'm also wondering if there is a way to disable it if someone happens to have a device without javascript, or how that works.

Thank you!

Quote

I'm also wondering if there is a way to disable it if someone happens to have a device without javascript, or how that works.

If a device doesn't have support for Javascript then Javascript can't run in the first place, so there is no need to disable it. Also note that for said device your site couldn't function as SS sites are heavily dependent on Javascript.

Good to know! I do need to disable the header animation and just have the regular header pop up for mobile, however. I tested it and the javascript animation causes the entire header to disappear, making it impossible to navigate the site from mobile. I tested it on my iPhone, for reference.