Adding onUpdate function fixes animation?

[iDVB 10 Likes (Newbie)]

Here is a very weird one.

We have an animation that seems to break when the browser is resized.

Only a single circle of the 6 we loop thru to create the animation breaks.

 

Here's the kicker. The fix was to simply add an EMPTY `onUpdate` function:

  const explosionMovementAmount = Math.min(windowWidth, windowHeight) * 0.28;
  const explosionAngle = MathUtils.degToRad(60);
  metaballs.forEach((metaball, i) => {
    explosionTl.fromTo(
      metaball.position,
      { x: () => metaballTarget.x, y: () => metaballTarget.y },
      {
        x: () =>
          explosionMovementAmount * Math.sin(i * explosionAngle) +
          metaballTarget.x,
        y: () =>
          explosionMovementAmount * Math.cos(i * explosionAngle) +
          metaballTarget.y,
        immediateRender: false,
        onUpdate: function () {},
        ease: 'back.inOut',
        duration: 2,
        yoyo: true,
        repeat: 1,
        repeatDelay: 1,
      },
      1
    );
  });

Just simply adding that fixes the issue.

 

Here is what is looks like broken: 

 

And here is with the empty onUpdate that fixes things:

 

 

 

 

[ZachSaucier 7,127 Likes (Superhero)]

That is interesting. Can you please create a minimal demo of the issue so that we can figure out exactly what is happening?

[iDVB 10 Likes (Newbie)]

I knew that would be the next question. However, its pretty tough with this example..... a lot of moving parts.

I'll see what I can do.