# TweenManager2.createTimeline to tweens.chain()

**URL:** <https://phaser.discourse.group/t/tweenmanager2-createtimeline-to-tweens-chain/13802>\
**Category:** Phaser 3\
**Created:** [December 12, 2023, 3:20pm UTC](https://phaser.discourse.group/t/tweenmanager2-createtimeline-to-tweens-chain/13802 "2023-12-12T15:20:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![smartin](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/smartin/32/7350_2.png) [@smartin](https://phaser.discourse.group/u/smartin)\
**Post date:** [December 12, 2023, 3:20pm UTC](https://phaser.discourse.group/t/tweenmanager2-createtimeline-to-tweens-chain/13802/1 "2023-12-12T15:20:38Z")

</div>

Hello guys,

I have upgraded Phaser into v3.60 and now I run into an issue. I had a script working fine with TweenManager.createTimeline() but now it is depreciated to be replaced with chain(). I struggle into updating this code :

```javascript
        let timeline = this.tweens.createTimeline({
            callbackScope: this,
            onComplete: function() {
                // When all the animations are done, we delete all the gems
                for(let m = 0; m < this.matchedGems.length; m++) {
                    for(let g = 0; g < this.matchedGems[m].length; g++) {
                        let gem = this.matchedGems[m][g];

                        this.gameArray[gem.x][gem.y].gem.sprite.destroy();
                        this.gameArray[gem.x][gem.y].isEmpty = true;
                        this.gameArray[gem.x][gem.y].gem = null;
                    }
                }

                this.matchedGems = []; 

                // After all the matched gems are gone, we make all the gems already in the field fall then replenish the field where there is hole.
                this.makeGemsFall().replenishField();
            },
        })

        for(let m = 0; m < this.matchedGems.length; m++) {
            // We create a new array populated with only the sprites of the gems to animate it.
            sprites = this.matchedGems[m].map((gem) => gem.sprite);

            timeline.add({
                targets: sprites,
                alpha: 0.1,
                duration: this.destroySpeed,
                callbackScope: this,
            })
        }    

        this.timeline.play();

```

Can someone help me with this ?

The core idea of this script is :

- create a timeline with an onComplete function (code that has to be run only when the timeline has finished playing)
- there is a variable amount of tweens to generate, each with a variable number of sprites.
- add these variable number of tweens to the timeline.

Thank you for your help 🙂

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [December 12, 2023, 3:42pm UTC](https://phaser.discourse.group/t/tweenmanager2-createtimeline-to-tweens-chain/13802/2 "2023-12-12T15:42:45Z")

</div>

👋

v3.60 tween chains are different from v3.55 tween timelines: they play only one tween at a time. So I don’t think you want to use a tween chain here.

Since all the tweens are the same duration, I think you can use just one tween.

```js
const sprites = this.matchedGems.flat().map((gem) => gem.sprite);

this.tweens.add({
    targets: sprites, // etc.
});

```