# How to tween object on curved path?

**URL:** <https://phaser.discourse.group/t/how-to-tween-object-on-curved-path/12934>\
**Category:** Phaser 3\
**Created:** [February 25, 2023, 12:50pm UTC](https://phaser.discourse.group/t/how-to-tween-object-on-curved-path/12934 "2023-02-25T12:50:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![NRJ](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nrj/32/952_2.png) [@NRJ](https://phaser.discourse.group/u/NRJ)\
**Post date:** [February 25, 2023, 12:50pm UTC](https://phaser.discourse.group/t/how-to-tween-object-on-curved-path/12934/1 "2023-02-25T12:50:07Z")

</div>

In my game I want to make the car turn and tween around the curved quarter circular path as shown below, I cannot able to figure out how to achieve the this.  
 ![carTurningTween](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/a6fcb730fa6d2769c408477a80b6720d81bf7a62.png)

---

<div class="post-metadata">

**Author:** ![007Gorbachov007](https://avatars.discourse-cdn.com/v4/letter/0/6f9a4e/32.png) [@007Gorbachov007](https://phaser.discourse.group/u/007Gorbachov007)\
**Post date:** [February 25, 2023, 2:39pm UTC](https://phaser.discourse.group/t/how-to-tween-object-on-curved-path/12934/2 "2023-02-25T14:39:34Z")

</div>

You change the coordinates object, and you rotate the image, what’s the problem?

---

<div class="post-metadata">

**Author:** ![NRJ](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nrj/32/952_2.png) [@NRJ](https://phaser.discourse.group/u/NRJ)\
**Post date:** [February 25, 2023, 4:51pm UTC](https://phaser.discourse.group/t/how-to-tween-object-on-curved-path/12934/3 "2023-02-25T16:51:39Z")

</div>

Do you mean by this way -

```javascript
this.tweens.add({
	targets : car, 
	ease : 'Quad.easeOut' ,
	props : {
		x : { value : '+='+96},
		y: { value : '-='+96},
		angle:90,
	}, 
	yoyo : false, 
	repeat : 0,
	duration : 500,
	callbackScope : this
}, this) ;

```

Doing this by applying above tween moves the car on the desired position and rotates correctly, but the car follows straight line path(red line in image below) , I want the method to move the car following curved circular path(green line in image below).  
 ![carTweening1](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/cd8dcd36ea8852fd022f5af17aa826ed223f739e.png)

---

<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:** [February 25, 2023, 4:54pm UTC](https://phaser.discourse.group/t/how-to-tween-object-on-curved-path/12934/4 "2023-02-25T16:54:34Z")

</div>

See [paths/followers/rotate to path](https://labs.phaser.io/edit.html?src=src%5Cpaths%5Cfollowers%5Crotate%20to%20path.js).

---

<div class="post-metadata">

**Author:** ![NRJ](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nrj/32/952_2.png) [@NRJ](https://phaser.discourse.group/u/NRJ)\
**Post date:** [February 26, 2023, 6:56am UTC](https://phaser.discourse.group/t/how-to-tween-object-on-curved-path/12934/5 "2023-02-26T06:56:33Z")

</div>

Thanks samme for the reply, tried the example but using this spline curve method I have not able to get the smooth quarter circular curve which I wanted.  
So I used this ellipse path method and it worked perfectly.

```javascript
let curve = new Phaser.Curves.Ellipse(196,292,96,96,180, 270);

let car = this.add.follower(curve, 196,292, 'car');
			
car.startFollow({
	duration: 500,
	yoyo: false,
	repeat: 0,
	rotateToPath: true,
	verticalAdjust: true, 
	rotationOffset:90
});

```