Animate showing all three panels

[avalon1315]

Hi,

I think that I have typed my code in correctly, but when I try to play the game all three panels of my sprite animation show. Can someone please tell me what I am doing wrong? I am stuck! Thank you so much in advance!!

var GameState={
  preload:function(){
      this.load.image('background', 'background.png');
      this.load.image('arrow', 'arrow.png');
      
      /*this.load.image('chicken', 'chicken.png');
      this.load.image('horse','horse.png');
      this.load.image('pig', 'pig.png');
      this.load.image('sheep','sheep3.png');*/
      
      this.load.image('chicken','chicken_spritesheet.png', 131,200,3);
      this.load.image('horse', 'horse_spritesheet.png', 212, 200, 3);
      this.load.image('pig', 'pig_spritesheet.png', 297,200,3);
      this.load.image('sheep', 'sheep_spritesheet.png', 244,200,3);
      
      
      
  },
     create: function() {
    
    //scaling options
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    
    //have the game centered horizontally
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = true;
    
    //create a sprite for the background
    this.background = this.game.add.sprite(0, 0, 'background')
         
    //group for animals
         
    var animalData=[
        
        {key:'chicken', text:'CHICKEN'},
        {key:'horse', text:'HORSE'},
        {key:'pig', text:'PIG'},
        {key:'sheep', text:'SHEEP'},
        
    ];
      
    
    this.animals=this.game.add.group();  
         
    var self= this;     
    var animal;
         
    animalData.forEach(function(element){
        
        animal = self.animals.create(-1000, self.game.world.centerY, element.key, 0);
        animal.customParams={text:element.key};
        animal.anchor.setTo(0.5);
        
        //animal animation
        
         animal.animations.add('animate', [0, 1, 2, 1, 0, 1], 3, false);
        
        animal.inputEnabled=true;
        animal.input.pixelPerfectClick=true;
        animal.events.onInputDown.add(self.animateAnimal,self);
    });

         this.currentAnimal=this.animals.next();
         this.currentAnimal.position.set(this.game.world.centerX,this.game.world.centerY);
         
         
         
    //left arrow
    this.leftArrow = this.game.add.sprite(60, this.game.world.centerY, 'arrow');
    this.leftArrow.anchor.setTo(0.5);
    this.leftArrow.scale.x = -1;
    this.leftArrow.customParams = {direction: -1};

    //left arrow allow user input
    this.leftArrow.inputEnabled = true;
    this.leftArrow.input.pixelPerfectClick = true;
    this.leftArrow.events.onInputDown.add(this.switchAnimal, this);

    //right arrow
    this.rightArrow = this.game.add.sprite(580, this.game.world.centerY, 'arrow');
    this.rightArrow.anchor.setTo(0.5);
    this.rightArrow.customParams = {direction: 1};

    //right arrow user input
    this.rightArrow.inputEnabled = true;
    this.rightArrow.input.pixelPerfectClick = true;
    this.rightArrow.events.onInputDown.add(this.switchAnimal, this);    

  },
  //this is executed multiple times per second
  update: function() {
  },
    
  animateAnimal: function(sprite, event) {
    sprite.play('animate');
  },
    
  switchAnimal: function(sprite, event) {
    
      if(this.isMoving){
          return false;
      }
      
      this.isMoving=true;
      
      var newAnimal, endX;
    
    if(sprite.customParams.direction >0){
       newAnimal= this.animals.next();
        newAnimal.x = -newAnimal.width/2;
        endX= 640 +this.currentAnimal.width/2;
        
    }else{
        
     newAnimal=this.animals.previous(); 
        newAnimal.x= 640 + newAnimal.width/2;
        endX= -this.currentAnimal.width/2;
    }
      var newAnimalMovement = this.game.add.tween(newAnimal);
      newAnimalMovement.to({x: this.game.world.centerX}, 1000);
      newAnimalMovement.onComplete.add(function(){
          this.isMoving=false;
      }, this);
      newAnimalMovement.start();
      
      var currentAnimalMovement= this.game.add.tween(this.currentAnimal);
      currentAnimalMovement.to({x:endX}, 1000);
      currentAnimalMovement.start();
      
      
      this.currentAnimal = newAnimal;
  }
  };
  
    
  
    

//initiate the Phaser framework
var game = new Phaser.Game(640, 360, Phaser.AUTO);

game.state.add('GameState', GameState);
game.state.start('GameState');