Can't add spritesheet animation sprite.animations is undefined?

[aherbig]

I'm trying to add a bubble-pop spritesheet animation to my game. I have added other sprites fine, and when I add the sprite for the bubble, everything is still good. However, when I go to add the animations, I get an error, "Cannot read property 'add' of undefined. How can I animate the bubble?

var config = { type: Phaser.AUTO, width: 1366, height: 768, parent: "canvas", scene: { preload: preload, create: create} };
var game = new Phaser.Game(config);

function preload () {
    this.load.image('freeplayBG', 'images/freeplay-BG.png');
    this.load.image('shark', 'images/nice-shark.png');
    this.load.spritesheet('bubblePop', 'images/bubble_pop_under_water_spritesheet.png', {frameWidth: 394, frameHeight: 511} );
}

function create() {
    //Set background
    this.add.image(685, 384, 'freeplayBG');

    //Set shark and make draggable
    var shark = this.add.sprite(200, 300, 'shark').setInteractive();
    this.input.setDraggable(shark);
    this.input.dragDistanceThreshold = 16;
    this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
        gameObject.x = dragX;
        gameObject.y = dragY;
    });

    //create the bubble sprite
    var bubble = this.add.sprite(700, 300, 'bubblePop');
    console.log(bubble); //Sprite {_events: Events, _eventsCount: 0, scene: Scene, type: "Sprite", parentContainer: null, …}
    console.log(bubble.animations); // undefined
    console.log(this) //Scene {sys: Systems, game: Game, anims: AnimationManager, cache: CacheManager, plugins: PluginManager, …}
    bubble.animations.add('pop'); //error happens here
    bubble.animations.play('pop', 10, false, true);

 

[rich]

It should be "bubble.anims" but you need to create the animation first, before you can play it. Have a look at this for an example: http://labs.phaser.io/edit.html?src=src\animation\single sprite sheet.js