Hi, I'm trying to do an animation where the image changes rapidly while it follows the cursor smoothly. The problem is that the image leave a weird "shadow" in the background when it moves. I've tested it on Firefox, Edge, Chrome and Opera (On two computers) and it occurs on all browsers beside Firefox. Is this a known bug? It is because of my TweenMax animation or my <img> that its src changes.
Here's the code for the change of image :
var imagesArray = $(this).data('images');
var index = 1;
$('.follow-cursor img').attr('src', imagesArray[0]);
imgChanger = setInterval(function () {
if (index >= imagesArray.length) {
index = 0;
}
$('.follow-cursor img').attr('src', imagesArray[index]);
index++;
}, 175);
Here's the code for the "sliding" animation :
$trigger.mousemove(function (e) {
$parentOffset = $(this).parent().offset();
relX = e.pageX - $parentOffset.left - $follower.outerWidth() * 0.5; // Float = percentage
relY = e.pageY - $parentOffset.top - $follower.outerHeight() * 0.7; // Float = percentage
mouseX = e.pageX;
mouseY = e.pageY;
});
posX = 0;
posY = 0;
var imgFollow = TweenMax.to({}, 0.005, {
repeat: -1,
onRepeat: function () {
if (relX && relY) {
posX += (relX - posX) / 9;
posY += (relY - posY) / 15;
TweenMax.set($('.invert'), {
css: {
x: position.left - posX,
y: position.top - posY,
},
});
TweenMax.set($follower, {
css: {
x: posX,
y: posY,
},
});
}
},
paused: true,
});
ezgifcom-gif-maker-1-kb79xxyl-gz7qgyco_I0gkbnRR.mp4