Problem with TweenMax and changing <img>'s src

[Vincent D]

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

 

[ZachSaucier]

Hey Vincent and welcome to the GreenSock forums.

 

That's definitely browser rendering error of some sort. It's impossible to know the cause from a video though  You could try adding will-change: transform to the relevant element(s) being transformed. It'd be really helpful if you made a minimal demo if you'd like our help debugging further.

 

Additionally you're using the old syntax. We highly recommend upgrading to GSAP 3 which has a smaller file size, a sleeker API, and a bunch of new features. Upgrading is easy! You also don't need to wrap properties in the css property - GSAP detects DOM elements and does that automatically.

[Vincent D]

Thanks a lot! will-change: transform; did fix my bug. I will try to fix my synthax too, didn't know i was using an old one 😅