How should I be controlling chained tweens?

[MNewbigging]

Hi there,

I could do with some advice on a problem I'm having. I've just started with tweenjs, so I'm sure there's something I'm missing!

I'm trying to make an animation on a threejs object where it bobs up and down, and where I can pause the animation on click:

getBobAnimation(object) {
  const up = new TWEEN.Tween(object.position).to({ y:  1 }, 1000);
  const down = new TWEEN.Tween(object.position).to({ y: 0 }, 1000);

  up.chain(down);
  down.chain(up); 

  return up;
}

const bob = getBobAnimation(object);
bob.start();

onMouseClick = () => {
  bob.pause(); 
}

The bob animation runs fine, but I can only pause it during the up portion, because that's what I returned in the above function. I thought the TWEEN.Group might help, but that seems to just be an array with some updating logic thrown in.

So I wrote this:

type UnknownProps = Record<string, any>;

export class ChainedTween {
  constructor(private tweens: TWEEN.Tween<UnknownProps>[], loop = false) {
    // Assumes an ordered array of tweens to chain of length 2+
    if (tweens.length <= 1) {
      return;
    }

    // Chain each tween to the previous
    for (let i = 1; i < tweens.length; i++) {
      const previousTween = tweens[i - 1];
      const currentTween = tweens[i];

      previousTween.chain(currentTween);
    }

    if (loop) {
      const lastTween = tweens[tweens.length - 1];
      const firstTween = tweens[0];

      lastTween.chain(firstTween);
    }
  }

  start() {
    this.tweens[0].start();
  }

  stop() {
    // Ideally have some ref to the current tween
    this.tweens.forEach((tween) => tween.stop());
  }

  pause() {
    // Ideally have some ref to the current tween
    this.tweens.forEach((tween) => tween.pause());
  }

  resume() {
    // Ideally have some ref to the current tween
    this.tweens.forEach((tween) => tween.resume());
  }

  update() {
    this.tweens.forEach((tween) => tween.update());
  }
}

But this just seems a bit overkill to me! So, to my question - is there some other way to achieve what I want here without writing the above class? Is it possible to hold a single reference to multiple chained tweens, and control them all via singular calls like the above class provides?

Thanks for reading :)

[mk965]

By using a TWEEN.Group, you can add multiple tweens (in this case, up and down) and control them collectively. This allows you to pause the entire group, which includes both the up and down animations. So, clicking during any part of the animation will pause it.

getBobAnimation(object) {
  const up = new TWEEN.Tween(object.position).to({ y: 1 }, 1000);
  const down = new TWEEN.Tween(object.position).to({ y: 0 }, 1000);

  up.chain(down);
  down.chain(up);

  // Create a TWEEN.Group to manage the animations
  const group = new TWEEN.Group();
  group.add(up);
  group.add(down);

  return group;
}

const bob = getBobAnimation(object);
bob.start();

onMouseClick = () => {
  bob.pause();
}