# TypeError: animationFrame is undefined

**URL:** <https://phaser.discourse.group/t/typeerror-animationframe-is-undefined/5553>\
**Category:** Phaser 3\
**Created:** [March 18, 2020, 10:03am UTC](https://phaser.discourse.group/t/typeerror-animationframe-is-undefined/5553 "2020-03-18T10:03:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rahul.sreedhar](https://avatars.discourse-cdn.com/v4/letter/r/ecd19e/32.png) [@rahul.sreedhar](https://phaser.discourse.group/u/rahul.sreedhar)\
**Post date:** [March 18, 2020, 10:03am UTC](https://phaser.discourse.group/t/typeerror-animationframe-is-undefined/5553/1 "2020-03-18T10:03:55Z")

</div>

So I have made a game with multiple animatons. The game runs fine on the browser but when i build it for web application. It gives me a “ **TypeError: animationFrame is undefined** ”. When i logged anims in the console, I have all my animations and all my frames in browser mode but no frames for my animations in the built mode. Cant figure out why. Here is my code. Hope somebody can help me out.

```
preload()
    {
        this.scene.bringToTop();
        this.load.image('bgImg','images/Bg.jpg');
        this.load.image('turretImg','images/turret.png');
        this.load.image('bulletImg','images/Bullet.png');
        this.load.image('fireballImg','images/fireball.png');
        this.load.image('healthUnitImg','images/health_unit.png');
        this.load.spritesheet('orcParaSprSheet', 'images/parachute.png',{frameWidth: 128, frameHeight: 170});
        this.load.spritesheet('helicopterSprSheet','images/heliSheet.png',{frameWidth: 258, frameHeight : 130});
        this.load.spritesheet('dragonSprSheet','images/dracoGreenSheet.png',{frameWidth: 258, frameHeight : 258});
        this.load.spritesheet('orcSprSheet','images/orcSheet.png',{frameWidth: 130, frameHeight : 130});
        this.load.spritesheet('blastSprSheet','images/blastSheet2.png',{frameWidth: 258, frameHeight : 258});
    }
    create() 
    {
        scoreObject.ResetScore();

        this.leftOrcs = new Array(0);
        this.rightOrcs = new Array(0);
        this.isGameOver = false;
        this.orcHitCount = 0;

        this.anims.create({
            key: 'helicopterFlyAnim',
        repeat: -1, 
        frameRate : 12, 
        frames: this.anims.generateFrameNames('helicopterSprSheet',{start:0,end:3})
    });

    this.anims.create({
        key: 'dragonFlyAnim',
        repeat: -1, 
        frameRate : 8, 
        frames: this.anims.generateFrameNames('dragonSprSheet',{start:0,end:2})
    });

    this.anims.create({
        key: 'orcIdleAnim',
        repeat:0,
        frameRate: 12,
        frames: this.anims.generateFrameNames('orcSprSheet',{start:6,end:6})
    });

    this.anims.create({
        key: 'orcWalkAnim',
        repeat:-1,
        frameRate: 8,
        frames: this.anims.generateFrameNames('orcSprSheet',{start:0,end:5})
    });

    this.anims.create({
        key: 'orcDieAnim',
        repeat:0,
        frameRate: 8,
        frames: this.anims.generateFrameNames('orcSprSheet',{start:6,end:8})
    });

    this.anims.create({
        key: 'orcParachuteAnim',
        repeat: 0,
        frameRate: 8,
        frames: this.anims.generateFrameNames('orcParaSprSheet',{start:0,end:0})
    });

    this.anims.create({
        key:'blastAnim',
        repeat: 0,
        frameRate: 8,
        frames: this.anims.generateFrameNames('blastSprSheet',{start:0,end:4})
    });

    console.log(this.anims);
}

```

\*\*EDIT : \*\* Solved. The issue was the casing in my image path files.

---

<div class="post-metadata">

**Author:** ![Villan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/villan/32/2920_2.png) [@Villan](https://phaser.discourse.group/u/Villan)\
**Post date:** [March 18, 2020, 3:01pm UTC](https://phaser.discourse.group/t/typeerror-animationframe-is-undefined/5553/2 "2020-03-18T15:01:27Z")

</div>

Should you be generating the frames from numbers and not names? generateFrameNumbers

---

<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:** [March 18, 2020, 4:31pm UTC](https://phaser.discourse.group/t/typeerror-animationframe-is-undefined/5553/3 "2020-03-18T16:31:38Z")

</div>

Add to start of `create()`:

```
console.log(this.textures.getTextureKeys());
```