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;
}