# Thrown arc tween

**URL:** <https://phaser.discourse.group/t/thrown-arc-tween/13490>\
**Category:** Examples\
**Created:** [August 23, 2023, 3:08am UTC](https://phaser.discourse.group/t/thrown-arc-tween/13490 "2023-08-23T03:08:02Z")\
**Posts on this page:** 1\
**Page:** 1

<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:** [August 23, 2023, 3:08am UTC](https://phaser.discourse.group/t/thrown-arc-tween/13490/1 "2023-08-23T03:08:02Z")

</div>

[https://codepen.io/samme/pen/BaGXPae](https://codepen.io/samme/pen/BaGXPae)

A Discord user asked for this and **wayfinder** had a good idea. Key points:

- You can tween properties separately. My example tweens `x` and `y` linearly (making a diagonal line path) and `z` as a yoyo `Quad.easeOut`.
- Yoyo tweens go 1 duration forward plus 1 duration backward, so this duration is halved.
- All game objects have a `z` property but Phaser doesn’t use it, so I used it for the arc distance. You could also use a second counter tween instead.
- The arc effect is done by adjusting the `y` coordinate based on the `z` value. This works because Phaser interpolates each tweened value at each step; the adjustments never accumulate.
- The `onUpdate()` callback is called once per property, so you need to check the `key` for which property you’re getting.

## Horizontal or vertical arc

[https://codepen.io/samme/pen/abPoZLV](https://codepen.io/samme/pen/abPoZLV)

This is the simpler case. You give a linear tween on one axis and a yoyo `Quad.easeOut` on the other axis.