Animation stutters after applying two Tweens

[iDVB]

Codepen attached. 
 

1. Compare inverting the last two lines (comment in/out). So run once with "explodeOut" only then another with "setupStart" only.
2. It appears that explodeOut causes the hover/interaction animations to be choppy. (perf issues)

See the Pen jOjPBPR?editors=0100 by iDVB (@iDVB) on CodePen.

[iDVB]

I think our issue was just that we had some of our functions running for EACH tile vs one time only.

 

Working now

See the Pen rNEOyxB?editors=0010 by iDVB (@iDVB) on CodePen.

[Rodrigo]

Hi,

 

Is great that you were able to find the issue. I didn't went through all your code earlier but the reason your two functions were creating problems as well is because they were both targeting the same elements at the same time, so the approach you had back when you first posted was good (using an onComplete callback to call another method once the first animation was completed).

 

As a final advice you don't need to do this on every tile:

const renderPositions = (clientX, clientY, duration = 2) => {
  const xMove = (clientX - heroRect.left - heroRect.width / 2) * 0.07;
  const yMove = (clientY - heroRect.top - heroRect.height / 2) * 0.07;

  tilesEl.forEach((tile, index) => {
    if (tileHovered === tile) return;
    const tileRect = tileRects[index];

    const distance = getDistance(tileRect, clientX, clientY);

    const rotationX = gsap.utils.clamp(-8, 8, distance.y * 0.01);
    const rotationY = gsap.utils.clamp(-8, 8, -distance.x * 0.01);

    gsap.to(tile, {
      x: -xMove,
      y: -yMove,
      z: 0,
      scale: 1,
      rotationX,
      rotationY,
      duration,
      ease: "power3"
    });
  });
};

You can create a re-usable clamp function:

const rotationClamper = gsap.utils.clamp(-8, 8);

const renderPositions = (clientX, clientY, duration = 2) => {
  const xMove = (clientX - heroRect.left - heroRect.width / 2) * 0.07;
  const yMove = (clientY - heroRect.top - heroRect.height / 2) * 0.07;

  tilesEl.forEach((tile, index) => {
    if (tileHovered === tile) return;
    const tileRect = tileRects[index];

    const distance = getDistance(tileRect, clientX, clientY);

    const rotationX = rotationClamper(distance.y * 0.01);
    const rotationY = rotationClamper(-distance.x * 0.01);

    gsap.to(tile, {
      x: -xMove,
      y: -yMove,
      z: 0,
      scale: 1,
      rotationX,
      rotationY,
      duration,
      ease: "power3"
    });
  });
};

https://gsap.com/docs/v3/GSAP/UtilityMethods/clamp()#2-clampminimum-maximum

 

That should save a few CPU cycles.

 

Thanks for sharing your code and demo with the community 💚, I'm sure many users will benefit from your generosity!

 

Happy Tweening!