# Chaining Animations

**URL:** <https://phaser.discourse.group/t/chaining-animations/1588>\
**Category:** Phaser 2 / CE\
**Created:** [March 7, 2019, 4:51pm UTC](https://phaser.discourse.group/t/chaining-animations/1588 "2019-03-07T16:51:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Davaaron](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Davaaron](https://phaser.discourse.group/u/Davaaron)\
**Post date:** [March 7, 2019, 4:51pm UTC](https://phaser.discourse.group/t/chaining-animations/1588/1 "2019-03-07T16:51:50Z")

</div>

Hey,

has someone an elegant way of chaining animations togehter?  
The animations are created using Texture Packer and it spits out multiple packs. The goal is to animate a lot of stuff, so I don’t want to create 35 nested callbacks or whatever. But I can’t find a proper/clean solution for that. I tried hoisting, context variations and simple arrays of objects.

---

<div class="post-metadata">

**Author:** ![Cerlancism](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cerlancism/32/631_2.png) [@Cerlancism](https://phaser.discourse.group/u/Cerlancism)\
**Post date:** [March 7, 2019, 5:14pm UTC](https://phaser.discourse.group/t/chaining-animations/1588/2 "2019-03-07T17:14:16Z")

</div>

I have tried using async await for tweens and animations. This is probably not its true intended use, but it served its purpose to flatten out such callback hell.

Create a promisifier for phaser signal

```javascript
/**
 * Convert a phaser event(signal) to promise(for use with async/await)
 * @param awaitSignal Phaser Signal
 */
function signalAsync(awaitSignal: Phaser.Signal)
{
	return new Promise((resolve, reject) =>
	{
		awaitSignal.addOnce(() =>
		{
			resolve(awaitSignal);
		});
	}) as Promise<Phaser.Signal>
}

```

Usage for an array of animations

```javascript
async function animateAsync(animationSequence: Phaser.Animation[])
{
	for (const animation of animationSequence)
	{
		await signalAsync(animation.play().onComplete)
	}
}

```

Besides the need for async await and Promise support/shim/transpile for some browsers, one major pitfall of this approach is it will hard to cancel if the chain gets big, probably has to create some kind of cancellation token which can be tedious.

---

<div class="post-metadata">

**Author:** ![Davaaron](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Davaaron](https://phaser.discourse.group/u/Davaaron)\
**Post date:** [March 8, 2019, 7:36am UTC](https://phaser.discourse.group/t/chaining-animations/1588/3 "2019-03-08T07:36:38Z")

</div>

That looks awesome. Either I gotta find a way to implement this in ES5 (hey, callback hell) or convert my project to ES6. And to Typescript…

Thanks for sharing your code!

Edit: Harder than I thought to convert this to ES5

---

<div class="post-metadata">

**Author:** ![Cerlancism](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cerlancism/32/631_2.png) [@Cerlancism](https://phaser.discourse.group/u/Cerlancism)\
**Post date:** [March 8, 2019, 4:22pm UTC](https://phaser.discourse.group/t/chaining-animations/1588/4 "2019-03-08T16:22:32Z")

</div>

I just thought of using recursion for ES 5. Not really sure if this works, not tested yet

```javascript
/**
 * Recursively play from an array of animations.
 * @param {Phaser.Animation[]} sequence 
 */
function animateRecursive(sequence)
{
    var sequenceCopy = sequence.slice()
    var animation = sequenceCopy.shift()
    var signal = animation.play().onComplete
    if (sequenceCopy.length > 0)
    {
        signal.addOnce(function ()
        {
            animateRecursive(sequenceCopy)
        })
    }
}

```

---

<div class="post-metadata">

**Author:** ![Davaaron](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Davaaron](https://phaser.discourse.group/u/Davaaron)\
**Post date:** [March 8, 2019, 7:41pm UTC](https://phaser.discourse.group/t/chaining-animations/1588/5 "2019-03-08T19:41:28Z")

</div>

That looks pretty neat, thanks for that 🙂