Trying to create an animation with two different images once a user reaches a specific point on the page. The animation works, but there is an issue when using a trackpad - the movement appears slow compared to scrolling with a mouse. I've already attempted setting the queue animation to false without success.
Any assistance would be greatly appreciated.
Here is my code:
<div class="logo-cnt">
<div class="logo-glyph">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=50%C3%9750&w=50&h=50">
</div>
<div class="logo-typeface">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=120%C3%9750&w=120&h=50">
</div>
</div>
<div class="lq">
</div>
jQuery :
var position = $('.lq').offset().top;
$(document).scroll(function () {
var y = $(this).scrollTop();
if(y > position){
$(".logo-typeface").stop().animate({right:50, opacity:0}, 100, "linear");
$(".logo-glyph").stop().animate({left:63}, 100);
}else{
$(".logo-typeface").stop().animate({right:0, opacity:1}, 100, "linear");
$(".logo-glyph").stop().animate({left:0}, 100);
}
});
View the live version here on JSFIDDLE