# Dynamically add tween

**URL:** <https://phaser.discourse.group/t/dynamically-add-tween/13869>\
**Category:** Phaser 3\
**Created:** [January 10, 2024, 3:37am UTC](https://phaser.discourse.group/t/dynamically-add-tween/13869 "2024-01-10T03:37:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![wooseok123](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/wooseok123/32/7951_2.png) [@wooseok123](https://phaser.discourse.group/u/wooseok123)\
**Post date:** [January 10, 2024, 3:37am UTC](https://phaser.discourse.group/t/dynamically-add-tween/13869/1 "2024-01-10T03:37:15Z")

</div>

Hi i’d like to add dynamically the tween event to an game object.  
I’ve found the event called “tween chain” but once the chain event is completed, it doesn’t execute the last tween event that i added to the chain. (it means, i add the event after the chain event is finished)

So i’d like to know if there’s any method in tween chain event that enable “dynamically adding tween event and executing it even though it is finished”.

By the way, it is my code that enable the above.

```javascript
  if (this.topBarTween) {
      if (!this.isTweenEnd) {
        // if the whole event of chain is not finished, add the tween event to the chain.
        const newTween = {
          targets: this.status_bar,
          width: `+=${max_width / curTarget}`,
          duration: 200,
        };
        this.topBarTween.add(newTween);
      } else {
         // if the whole event of chain is finished, make new chain event.
        this.isTweenEnd = false;
        this.topBarTween = this.tweens.chain({
          targets: this.status_bar,
          tweens: [{width: `+=${max_width / curTarget}`, duration: 200}],
          onComplete: () => {
            this.isTweenEnd = true;
          },
        });
      }
    } else {
        // if there isn't a tween chain event, make new one
      this.topBarTween = this.tweens.chain({
        targets: this.status_bar,
        tweens: [{width: `+=${max_width / curTarget}`, duration: 200}],
        onComplete: () => {
          // if the whole event of chain is finished, set the variable that tracks the tween event process true.
          this.isTweenEnd = true;
        },
      });
    }

```

---

<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:** [January 10, 2024, 5:47pm UTC](https://phaser.discourse.group/t/dynamically-add-tween/13869/2 "2024-01-10T17:47:53Z")

</div>

You can add `persist: true` to the tween chain config but I think you would still have to restart the tween after that, which isn’t what you want. Probably best to create a new chain.

---

<div class="post-metadata">

**Author:** ![wooseok123](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/wooseok123/32/7951_2.png) [@wooseok123](https://phaser.discourse.group/u/wooseok123)\
**Post date:** [January 17, 2024, 9:28am UTC](https://phaser.discourse.group/t/dynamically-add-tween/13869/3 "2024-01-17T09:28:17Z")

</div>

thank you!