Disable animation based on screen size

Question

I am using waypoints.js for animations and I have got the following to work

$(document).ready(function(){
  "use strict"; 
    $('.slogan').waypoint(function(direction) {             
        $('.onelogo').toggleClass('hide', direction === 'down');
    });
});

But the only problem with the above is that the animation still plays on mobile, so after reading I tried to implement the following

$(document).ready(function(){
    $(window).resize(function () {
        width=$(window).width();
        if (width > 950){
            var waypoints = document.querySelectorAll('.slogan');
            for (var i = waypoints.length - 1; i >= 0; i--) {
                var waypoint = new Waypoint({
                    element: waypoints[i],
                    handler: function(direction) {
                        this.element.classList.toggle('.hide');
                    },
                    offset: '60%',
                });
            }
        } else {
            // less then 950 px.
            if ($(".onelogo").hasClass(".hide")) {
                $(".onelogo").removeClass(".hide"); 
            }
        }
    });
});

But doing it that way the animation doesn't play at all

html

<div class="slogan">        
        <img class="onelogo" src="http://via.placeholder.com/350x150">
</div>

css

.slogan {
    display: block;
    position: absolute;
    right: 10%;
    top: 40%;
    line-height: 34px;
    color: #949494;
    z-index: 10;
}

.onelogo {
    display: block;
    height: 110px;
    width: auto;
     -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}       

.hide {
  opacity: 0;
  margin-top: -29vh;
}

Since your function is on resize, nothing will happen when you first load the page. I'm not familiar with waypoints.js, so I can't give too much specific advice, but the first thing to try would be adding a function to trigger a resize event at the very end of your function, after the resize function itself. Simply do `$(window).resize()` inside of `$(document).ready` to trigger the function you just did on page load. — cjl750, Mar 31 '18 at 03:09
Your above code has a syntax error in the Waypoint constructor. Remove the comma after the offset property. Also removeClass and toggle take a class name ("hide"), not a class selector (".name") — Jonathan Chaplin, Apr 02 '18 at 15:13

Jonathan Chaplin · Accepted Answer · 2018-04-05T14:35:49.073

The easiest way to do this is to add the waypoint on $(document).ready(), and call the waypoint enable / disable based on the window size.

<script>
var waypoint;
function handleWayPoint() {
    var $width = $(window).width();
    console.log($width);
    if($width > 950) {
      waypoint[0].enable();
    }
    else {
        waypoint[0].disable();
    }
  }

$(document).ready(function(){
  "use strict";
   waypoint= $('.slogan').waypoint(function(direction) {             
         $('.onelogo').toggleClass('hide', direction === 'down');
   });
   handleWayPoint();

   $(window).resize(function() {
      handleWayPoint();
   });
});
</script>

In addition to the errors I mentioned in my comments, the main issue with your other code is this line: this.element.classList.toggle('.hide'); this in JavaScript works quite differently than it does in other languages (Java, C++ for example). In general, this in JavaScript is set to the object left of the dot operator (although there are exceptions). This post goes into greater detail.

Here is a fiddle

I know how to use media queries but media queries are not going to do what I need the hide class does not hide it scrolls up and hides this dont show it at all — Codi, Apr 04 '18 at 16:13

score 0 · Answer 2 · answered Apr 02 '18 at 13:43

I'm not familiar with waypoints, but you can try to wrap your logic in a function and then call it both on $(document).ready and $(window).resize :

function toggleAnimation(){
    width=$(window).width();

    if (width > 950){
    var waypoints = document.querySelectorAll('.slogan');
        for (var i = waypoints.length - 1; i >= 0; i--) {
            var waypoint = new Waypoint({
                element: waypoints[i],
                handler: function(direction) {
                    this.element.classList.toggle('.hide');
                },
                offset: '60%',
            });
         }
    } else {
       // less then 950 px.
       if ($(".onelogo").hasClass(".hide")) {
           $(".onelogo").removeClass(".hide"); 
       }

    }
}

and call...

$(document).ready(function(){
    toggleAnimation();

    $(window).resize(function(){
        toggleAnimation();
    }); 
})

score 0 · Answer 3 · answered Apr 02 '18 at 13:58

Do you like to stop the animation when the screen size is less than 950px? I don't know, but I think that you can try this:

var waypoints = null;
$(document).ready(function() {
    $(window).resize(function () {
        width=$(window).width();
        if (width > 950) {
            ...
        } else if (waypoints != null) {
            waypoints.disable() //or waypoints.destroy() if new instance
        }
    });
});

Disable animation based on screen size

3 Answers3