# Animate group

**URL:** https://phaser.discourse.group/t/animate-group/2018
**Category:** Phaser 3
**Created:** [April 8, 2019, 6:38am UTC](https://phaser.discourse.group/t/animate-group/2018 "2019-04-08T06:38:01Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![froggomad](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/froggomad/32/1138_2.png) [@froggomad](https://phaser.discourse.group/u/froggomad)
#### Post date: [April 8, 2019, 6:38am UTC](https://phaser.discourse.group/t/animate-group/2018/1 "2019-04-08T06:38:02Z")

</div>

I’m trying to animate a group like:

```
var forward;
    function preload() {
        this.load.multiatlas('forward', 'assets/forward.json', 'assets');
    }
    function create() {
        forward = this.physics.add.staticGroup();
        forward.create(200, 534, 'forward', 'forward.png'); //creates sprite with default image (forward.png)
        var frameNames = this.anims.generateFrameNames('forward', {
            start: 2, end: 4, zeroPad: 1,
            prefix: 'forward', suffix: '.png' //loads forward2.png, forward3.png, forward4.png from spritesheet
        });

        this.anims.create({ key: 'disappear', frames: frameNames, frameRate: 10, repeat: -1 }); //infinite animation
        forward.playAnimation('disappear');
    }

```

But no animation plays, the sprites remain with their originally assigned image

---

<div class="post-metadata">

### Author: ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)
#### Post date: [April 8, 2019, 6:59am UTC](https://phaser.discourse.group/t/animate-group/2018/2 "2019-04-08T06:59:05Z")

</div>

Hey @froggomad,  
I’m not sure about this solution but as far as know you should call every child from your group so you might use something like this:

```
Phaser.Actions.Call(forward.getChildren(), child => {
	child.anims.play('disappear');
});

```

As i said, i’m not sure about this but let me know if it’s working 🙂

---

<div class="post-metadata">

### Author: ![froggomad](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/froggomad/32/1138_2.png) [@froggomad](https://phaser.discourse.group/u/froggomad)
#### Post date: [April 8, 2019, 3:19pm UTC](https://phaser.discourse.group/t/animate-group/2018/3 "2019-04-08T15:19:06Z")

</div>

Thanks @hcakar, but it’s the same result. I don’t have much experience with Phaser, but read that `groupName.playAnimation()` is a shortcut for `groupName.callAll` which is supposed to be a shortcut for the method you’re using ([https://phaser.io/examples/v2/groups/call-all-animations](https://phaser.io/examples/v2/groups/call-all-animations)) - but when I try, throws an error that callAll isn’t a function - maybe phased out in v3?

---

<div class="post-metadata">

### Author: ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)
#### Post date: [April 8, 2019, 3:28pm UTC](https://phaser.discourse.group/t/animate-group/2018/4 "2019-04-08T15:28:37Z")

</div>

> [@froggomad](#):
>
> Thanks @hcakar, but it’s the same result. I don’t have much experience with Phaser, but read that `groupName.playAnimation()` is a shortcut for `groupName.callAll` which is supposed to be a shortcut for the method you’re using ([Phaser - Examples - Groups - Call All Animations](https://phaser.io/examples/v2/groups/call-all-animations)) - but when I try, throws an error that callAll isn’t a function - maybe phased out in v3?

I see, i just checked the Group.js and yes there is a function called `playAnimation()` which this function leads to `Actions.PlayAnimation` and then it’s here:

```
/**
 * @author Richard Davey <rich@photonstorm.com>
 * @copyright 2019 Photon Storm Ltd.
 * @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
 */

/**
 * Play an animation with the given key, starting at the given startFrame on all Game Objects in items.
 *
 * @function Phaser.Actions.PlayAnimation
 * @since 3.0.0
 *
 * @generic {Phaser.GameObjects.GameObject[]} G - [items,$return]
 *
 * @param {(array|Phaser.GameObjects.GameObject[])} items - An array of Game Objects. The contents of this array are updated by this Action.
 * @param {string} key - The name of the animation to play.
 * @param {(string|integer)} [startFrame] - The starting frame of the animation with the given key.
 *
 * @return {(array|Phaser.GameObjects.GameObject[])} The array of Game Objects that was passed to this Action.
 */
var PlayAnimation = function (items, key, startFrame)
{
    for (var i = 0; i < items.length; i++)
    {
        items[i].anims.play(key, startFrame);
    }

    return items;
};

module.exports = PlayAnimation;

```

And as you said it’s same funciton. But there is one problem. I never saw callAll function in this path…

Maybe you have some else error ?

And can you please check if your `frameNames` are correct or not ?

---

<div class="post-metadata">

### Author: ![froggomad](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/froggomad/32/1138_2.png) [@froggomad](https://phaser.discourse.group/u/froggomad)
#### Post date: [April 8, 2019, 5:26pm UTC](https://phaser.discourse.group/t/animate-group/2018/6 "2019-04-08T17:26:49Z")

</div>

Regarding the `callAll` error - I’m saying that was the error I got when I tried to use `callAll`

Using your method is the same result as my method - no animation and no errors

Sorry I wasn’t more clear

---

<div class="post-metadata">

### Author: ![froggomad](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/froggomad/32/1138_2.png) [@froggomad](https://phaser.discourse.group/u/froggomad)
#### Post date: [April 8, 2019, 8:41pm UTC](https://phaser.discourse.group/t/animate-group/2018/7 "2019-04-08T20:41:57Z")

</div>

Update: The animation works as I’m able to call it in update on pressing a key like:

```
if (cursors.left.isDown || aKey.isDown)
{
  forward.playAnimation('disappear');
}

```

How can I call it so it runs automatically? I’ve put `forward.playAnimation('disappear');` in the root of `update()` but it doesn’t seem to work unless it’s triggered by something else

---

<div class="post-metadata">

### Author: ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)
#### Post date: [April 9, 2019, 6:28am UTC](https://phaser.discourse.group/t/animate-group/2018/8 "2019-04-09T06:28:30Z")

</div>

> [@froggomad](#):
>
> Regarding the `callAll` error - I’m saying that was the error I got when I tried to use `callAll`
> 
> Using your method is the same result as my method - no animation and no errors
> 
> Sorry I wasn’t more clear

I see, yea sorry it wasn’t that clear for me either 🙂

> [@froggomad](#):
>
> Update: The animation works as I’m able to call it in update on pressing a key like:
> 
> ```javascript
> if (cursors.left.isDown || aKey.isDown)
> {
> forward.playAnimation('disappear');
> }
> 
> ```
> 
> How can I call it so it runs automatically? I’ve put `forward.playAnimation('disappear');` in the root of `update()` but it doesn’t seem to work unless it’s triggered by something else

About this, I actually doesn’t have anything to say maybe we could ask for help from @samme, he was always a good help 🙂
