# Updating animation smoothly

**URL:** <https://phaser.discourse.group/t/updating-animation-smoothly/9799>\
**Category:** Phaser 3\
**Created:** [June 17, 2021, 3:13pm UTC](https://phaser.discourse.group/t/updating-animation-smoothly/9799 "2021-06-17T15:13:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![julien](https://avatars.discourse-cdn.com/v4/letter/j/71e660/32.png) [@julien](https://phaser.discourse.group/u/julien)\
**Post date:** [June 17, 2021, 3:13pm UTC](https://phaser.discourse.group/t/updating-animation-smoothly/9799/1 "2021-06-17T15:13:45Z")

</div>

Hi everyone,  
I am doing a spin animation but I need to wait for a backend call to determine some of its parameters. So I first start the animation with some params and then when I got the response from backend I update the animation (changing the angle param). Doing so is working but I have a “bump/glitch” when it is updated. Would there be any way to make the update smooth as in you can’t notice the change watching the animation ?  
Here is the code of the animation :

```javascript
const anim = scene.tweens.add({
    targets: [targetContainer],
    angle: angle, // this is calculated, 360 * rounds => rounds = random(2,5)
    duration: WHEEL_ROTATION_DURATION, //6500
    ease: 'Cubic.easeOut',
})

```

to update the animation I do :

```javascript
anim.data[0].end += newAngle // newAngle is calculated

```

---

<div class="post-metadata">

**Author:** ![Antriel](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/antriel/32/15_2.png) [@Antriel](https://phaser.discourse.group/u/Antriel)\
**Post date:** [June 18, 2021, 11:04am UTC](https://phaser.discourse.group/t/updating-animation-smoothly/9799/2 "2021-06-18T11:04:40Z")

</div>

Best way to make it smooth would be to manually update the angle in `update`, using constant speed (so something like `container.angle += angleSpeed * dt`).  
Then afterwards, when you get the backend response, just start the `easeOut` tween with the correct end position, and specify speed rather than the duration.

---

<div class="post-metadata">

**Author:** ![julien](https://avatars.discourse-cdn.com/v4/letter/j/71e660/32.png) [@julien](https://phaser.discourse.group/u/julien)\
**Post date:** [June 21, 2021, 7:44am UTC](https://phaser.discourse.group/t/updating-animation-smoothly/9799/3 "2021-06-21T07:44:28Z")

</div>

Works very nicely, thanks for the advice. Didn’t think about that but it’s quite logical and works very well.