[Can't figure how the delay time works in a stagger]

Hahaha yes I know, but I just found out that the 10 for the delay is actually the "original" time. So if you change variable to another number, you need to change that number for the delay too.

 

Edit: Or create another variable ^^

[Can't figure how the delay time works in a stagger]

Thanks you sooooo much! I really need this, now I will try to understand it because it bugs me not to understand. You gave me the key for it and I'm really thankful for it!! 😁 

[Can't figure how the delay time works in a stagger]

Hi! I'm doing a module where the words are sliding and need to always be at the same speed even if they have a different length. I managed to get very far but I'm stuck at the very end (I think), where I can't calculate the delay for when the words wrap.

 

What I know is that the first line needs a delay of around0.8 and the second one needs a delay of around 1.225. How does that delay works? Because I can't have hardcoded numbers since the size will change. 

 

Thanks in advance 😄

Here's a link to an image showing the problem : https://pasteboard.co/JCa7H2P.png

See the Pen NWRKBMg?editors=1010 by d00td00t (@d00td00t) on CodePen

[The code doesn't work the same in codepen.io vs on my website]

Thank you! I didn't know that

[The code doesn't work the same in codepen.io vs on my website]

Hi, I've been on this problem for a couple of hours and I can't seem to understand why my code doesn't work on my website while it does on codepen. I have even created a new file just to try this it on a clean sheet but it still doesn't work. Why is that?

 

Here's the link for the website that I'm trying it on : https://treize.dev/gsap_forum/

Here's the link for the codepen : 

 

Thanks in advance! 😁

See the Pen rNLEjNo by d00td00t (@d00td00t) on CodePen

[Problem with TweenMax and changing <img>'s src]

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 😅

[Problem with TweenMax and changing <img>'s src]

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