Chaining multiple tweens

It is possible to chain multiple tween in phaser?

I use a async function in my code, but I would like to know if there is a phaser way of doing it?

Something like the code below would be useful. Each one of these 3 tweens would run after the onComplete callback was called.

 .add({ ...config1})
 .add({ ...config2})
 .add({ ...config3})\timelines\create%20timeline.js

1 Like

Thanks @samme

Helps to know that there is a createTimeline() method on the tweens.

But unfortunately if I want to chain tweens, then some custom functions, then a tween again and another custom function, I run into callback hell.

I think the cleanest way in my case, was to stick with async/await:

  private async startTween() {
    await this.tweensAsync({
      targets: this,
      scaleX: 1.5,
      scaleY: 1.5,
      yoyo: true,
      delay: 500,
      duration: 200,
      onComplete: () => console.log('tween 1 completed')

    await this.tweensAsync({
      targets: this,
      y: 10,
      scaleX: 0.5,
      scaleY: 0.5,
      ease: 'Sine.easeInOut',
      delay: 500,
      duration: 400,
      onComplete: () => console.log('tween 2 completed')


    await this.tweensAsync({
      targets: this,
      alpha: 0,
      delay: 2000,
      duration: 400,
      onComplete: () => console.log('tween 3 completed')


Here is my code.


Here, is a better way, to do this.
Phaser 3 Example

In Phaser v3.60, tween chains have replaced tween timelines.

1 Like