# Changing value of tween property for new target

**URL:** <https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499>\
**Category:** Phaser 3\
**Created:** [July 5, 2024, 6:04pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499 "2024-07-05T18:04:45Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![adaniel](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@adaniel](https://phaser.discourse.group/u/adaniel)\
**Post date:** [July 5, 2024, 6:04pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/1 "2024-07-05T18:04:45Z")

</div>

```javascript
// I create a tween for some initial target but I intend to reuse it
let myTween = this.tweens.add({targets:firstObject,
                              paused:true,
                              y: firstObject.y+20,
                              duration:100,
                              persist:true,
                            });
                            
// then in some other part of the code I play that tween for another target
myTween.targets=[secondObject];
myTween.play(); 

// My problem is I don't know how to change the wanted value of Y 
// from firstObject.y+20 to secondObject.y+20!
// Can this be done?

```

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [July 7, 2024, 10:42am UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/2 "2024-07-07T10:42:25Z")

</div>

```javascript
function addTween(Object, Value) {
    let result = this.tweens.add({
        targets: Object,
        paused: true,
        y: Object.y + Value,
        duration: 100,
        persist: true,
    });
    return result;
}

firstObject.tween = addTween(firstObject, 20);
secondObject.tween = addTween(secondObject, 20);

firstObject.tween.play(); 
secondObject.tween.play();

```

---

<div class="post-metadata">

**Author:** ![adaniel](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@adaniel](https://phaser.discourse.group/u/adaniel)\
**Post date:** [July 7, 2024, 1:17pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/3 "2024-07-07T13:17:13Z")

</div>

Your solution creates two tweens, one for each target. **My scenario requires creating a tween for one target and then reusing that tween for a second target.**

I can change the target of an already created tween. **What’s missing is changing the y value of an already created tween.**

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [July 8, 2024, 1:34pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/4 "2024-07-08T13:34:10Z")

</div>

OK, tween has an update method that changes the value of the specified key.  
`myTween.updateTo ("y", 200, false)`  
[https://newdocs.phaser.io/docs/3.80.0/focus/Phaser.Tweens.Tween-updateTo](https://newdocs.phaser.io/docs/3.80.0/focus/Phaser.Tweens.Tween-updateTo)

---

<div class="post-metadata">

**Author:** ![adaniel](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@adaniel](https://phaser.discourse.group/u/adaniel)\
**Post date:** [July 8, 2024, 5:21pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/5 "2024-07-08T17:21:28Z")

</div>

Thanks Qugurun.

I’ve tried the solution. I was hoping I can call the “updateTo” method in the callbacks for the ‘start’ or ‘update’ events but it didn’t work. It works only if I call it in the update method of the scene. This solves the problem but it seems more like a hack than a canonical solution so I’m not 100% satisfied with this.

Let me rephrase my original question: **I have a scene with 1000 platforms and a character that jumps on them. Every platform must shake after the character jumps on it. Every platform shakes the same way. So my immediate thought was to reuse a tween for all the platforms but I don’t know how to do it in a simple way.(Currently I create a new tween for each jump but it seems unnecessary considering that every created tween is identical, only with a different target and y value.)**

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [July 8, 2024, 9:32pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/6 "2024-07-08T21:32:53Z")

</div>

You need to change the code.

```javascript
let myTween = this.tweens.add({
	targets:firstObject,
	paused:true,
	//y: firstObject.y+20,
	y: '+=20',
	duration:100,
	persist:true,
});

```

---

<div class="post-metadata">

**Author:** ![adaniel](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@adaniel](https://phaser.discourse.group/u/adaniel)\
**Post date:** [July 9, 2024, 11:31am UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/7 "2024-07-09T11:31:47Z")

</div>

There’s no difference, using `y: '+=20'` works the same way as `y: firstObject.y+20`. The end and start values remain the same for every target.

Is it possible to change the start and end values of a tween, without using updateTo method ?

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [July 9, 2024, 11:52am UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/8 "2024-07-09T11:52:11Z")

</div>

If you write like this, then you will just need to change the target and that’s it, any target will decrease from its current y to y+20. this is exactly what you need.

---

<div class="post-metadata">

**Author:** ![adaniel](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@adaniel](https://phaser.discourse.group/u/adaniel)\
**Post date:** [July 9, 2024, 12:27pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/9 "2024-07-09T12:27:21Z")

</div>

I tested this and doesn’t work.  
What happens: Any target after the first, goes to the y coordinate of the first target and then tweens to first target y +20. So changing the target doesn’t change the stard/end value.

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [July 9, 2024, 2:01pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/10 "2024-07-09T14:01:24Z")

</div>

I’m sorry, I tested it again and saw what you’re talking about.

---

<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:** [July 9, 2024, 3:00pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/11 "2024-07-09T15:00:47Z")

</div>

I would just use a new tween.

---

<div class="post-metadata">

**Author:** ![adaniel](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@adaniel](https://phaser.discourse.group/u/adaniel)\
**Post date:** [July 9, 2024, 3:24pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/12 "2024-07-09T15:24:41Z")

</div>

Currently I am creating a new tween but I was looking for an alternative.

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [July 9, 2024, 4:09pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/13 "2024-07-09T16:09:28Z")

</div>

```javascript
this.myImage1 = this.add.image(300, 100, "picture.png");
this.myImage2 = this.add.image(200, 300, "picture.png");

let obj = this.myImage1;
let tween = this.tweens.add({
	targets: obj,
	y: "+=20",
	paused: true,
	duration: 500,
	persist: true,
	yoyo: true,
	onComplete: () => {
		obj = (obj === this.myImage1) ? this.myImage2 : this.myImage1;
		
		tween.targets = [obj];
		tween.data[0].start = obj.y;
		tween.play();
	}
});
tween.play();

```

I found a solution, you need to reset the starting position additionally:  
`tween.data[0].start = obj.y`

![GIF 09.07.2024 21-17-05](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/06ab4ec024240be9ee1d5b962a4d3f55ec7e868d.gif)

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [July 9, 2024, 5:38pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/14 "2024-07-09T17:38:29Z")

</div>

Additionally, Y can be changed in this way.

```javascript
y: ()=>{
    return Phaser.Math.Between(10, 200);
}

```

or

```javascript
y: (target)=>{
    return target.y + 20;
}

```

---

<div class="post-metadata">

**Author:** ![adaniel](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@adaniel](https://phaser.discourse.group/u/adaniel)\
**Post date:** [July 16, 2024, 9:25pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/15 "2024-07-16T21:25:40Z")

</div>

In practice I can’t know in advance on what platform the player will jump. So in onComplete callback I can’t switch to the next obj because I don’t know which one will be. Also it’s unmanageable for 1000 objects.

---

<div class="post-metadata">

**Author:** ![Qugurun](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/qugurun/32/5132_2.png) [@Qugurun](https://phaser.discourse.group/u/Qugurun)\
**Post date:** [July 16, 2024, 10:05pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/16 "2024-07-16T22:05:08Z")

</div>

In `onComplete`, I just gave an example of how to correctly change the object that the animation will work with, how you will implement this in your project depends only on you.

You need to use these three lines of code in order to assign an object and start the animation.

```javascript
tween.targets = [obj];
tween.data[0].start = obj.y;
tween.play();

```

---

<div class="post-metadata">

**Author:** ![adaniel](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@adaniel](https://phaser.discourse.group/u/adaniel)\
**Post date:** [July 16, 2024, 10:52pm UTC](https://phaser.discourse.group/t/changing-value-of-tween-property-for-new-target/14499/17 "2024-07-16T22:52:02Z")

</div>

Yes, you’re right, this works. Thanks Qugurun !
