Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I disable a javascript animation for mobile devices?


CherryTree

Question

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!

Link to comment

2 answers to this question

Recommended Posts

  • 0
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...