# Sprite animation repeats forever

**URL:** <https://phaser.discourse.group/t/sprite-animation-repeats-forever/7814>\
**Category:** Phaser 3\
**Created:** [October 21, 2020, 8:53am UTC](https://phaser.discourse.group/t/sprite-animation-repeats-forever/7814 "2020-10-21T08:53:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Martin\_Turner](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/martin_turner/32/4193_2.png) [@Martin\_Turner](https://phaser.discourse.group/u/Martin_Turner)\
**Post date:** [October 21, 2020, 8:53am UTC](https://phaser.discourse.group/t/sprite-animation-repeats-forever/7814/1 "2020-10-21T08:53:11Z")

</div>

Hi There.

Can you help - I just started playing with Phaser and I can’t play Sprite animation only once. It repeats for ever. If change true to false in the player.anims.play command, it only plays the first frame of the animation.  
I just want the animation to play and then stop on the last frame.

function preload() {  
this.load.spritesheet(‘ship’, ‘assets/images/player.png’, { frameWidth: 194, frameHeight: 201 });  
}

function create() {  
this.anims.create({  
key: ‘left’,  
frames: this.anims.generateFrameNumbers(‘ship’, { start: 2, end: 0 }),  
frameRate: 8,  
repeat: 0  
})  
}

function update() {  
if (cursors.left.isDown)  
{  
player.setVelocityX(-500)  
player.anims.play(‘left’, true);  
}  
}

What am i doing wrong. Cheers for your help.

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [October 21, 2020, 9:27am UTC](https://phaser.discourse.group/t/sprite-animation-repeats-forever/7814/2 "2020-10-21T09:27:12Z")

</div>

Hi,  
You call the animation inside of update, and update runs usually at 60fps, so you call player.anims.play 60 time per second.  
You must create a function startAnimation for example with a flag to true, once the cursors.left.isUp you put back the flag to false  
Here’s a very basic example

```javascript
var animationIsplaying = false;

function preload() {
  this.load.spritesheet(‘ship’, ‘assets/images/player.png’, { frameWidth: 194, frameHeight: 201 });
}

function create() {
  this.anims.create({
    key: ‘left’,
    frames: this.anims.generateFrameNumbers(‘ship’, { start: 2, end: 0 }),
    frameRate: 8,
    repeat: 0
  });
}

function update() {
  if (cursors.left.isDown)
  {
    player.setVelocityX(-500);
    startAnimation();
  }
  if (cursors.left.isUp)
  {
  animationIsPlaying = false;
  }
}

function startAnimation()
{
  if(animationIsPlaying === false)
  {
    animationIsPlaying = true;
    player.anims.play(‘left’, true);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Martin\_Turner](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/martin_turner/32/4193_2.png) [@Martin\_Turner](https://phaser.discourse.group/u/Martin_Turner)\
**Post date:** [October 21, 2020, 10:35am UTC](https://phaser.discourse.group/t/sprite-animation-repeats-forever/7814/3 "2020-10-21T10:35:57Z")

</div>

I see - thanks for your help. That fact was certainly not made clear by the tutorial I followed.  
I’m surprised that Phaser doesn’t handle that for you.

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [October 21, 2020, 10:41am UTC](https://phaser.discourse.group/t/sprite-animation-repeats-forever/7814/4 "2020-10-21T10:41:35Z")

</div>

Phaser can’t knows what you want to do, you can play an anim and stop it when you want with player.anims.stop() or pause()/resume()  
But if you starts an anim, and once stopped you start it again like in the update loop, Phaser was just doing what you tell him to do, your problem is more a logic problem.

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [October 21, 2020, 12:43pm UTC](https://phaser.discourse.group/t/sprite-animation-repeats-forever/7814/5 "2020-10-21T12:43:23Z")

</div>

Hi @Martin_Turner and wellcome,

As @BlunT76 says, your code is correct.

The purpose of the second param of **player.anims.play** (ignoreIfplaying) is ignore a call when is playing (more info in [docs](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Sprite.html#play__anchor) ).  
If you need to change the frame when the animation completes or stops you must use the [animationcomplete-key event](https://photonstorm.github.io/phaser3-docs/Phaser.Animations.Events.html#event:SPRITE_ANIMATION_KEY_COMPLETE__anchor)  
Here an example:

https://codepen.io/jjcapellan/embed/preview/abZmrWd?height=315&theme-id=dark&default-tab=result

All official animation examples [here](http://labs.phaser.io/index.html?dir=animation/&q=).

Regards.

---

<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:** [October 21, 2020, 2:43pm UTC](https://phaser.discourse.group/t/sprite-animation-repeats-forever/7814/6 "2020-10-21T14:43:09Z")

</div>

`update()` is called every frame, so anything you do there will happen forever.