# Stop animation when cursor key is released

**URL:** <https://phaser.discourse.group/t/stop-animation-when-cursor-key-is-released/14492>\
**Category:** Phaser 3\
**Created:** [July 3, 2024, 3:42pm UTC](https://phaser.discourse.group/t/stop-animation-when-cursor-key-is-released/14492 "2024-07-03T15:42:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Codeworm08](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/codeworm08/32/8364_2.png) [@Codeworm08](https://phaser.discourse.group/u/Codeworm08)\
**Post date:** [July 3, 2024, 3:42pm UTC](https://phaser.discourse.group/t/stop-animation-when-cursor-key-is-released/14492/1 "2024-07-03T15:42:00Z")

</div>

I want the character to stop facing the current direction when the cursor key is released. Currently the character keeps playing the moving animation even when it comes to a stop.  
My preload code:

```javascript
const downconfig = {
            key: 'down',
            frames: this.anims.generateFrameNumbers('player',{start: 0, end: 3,}),
            frameRate: 5,
            repeat: -1
        };
        const upconfig = {
            key: 'up',
            frames: this.anims.generateFrameNumbers('player',{start: 34, end: 37,}),
            frameRate: 5,
            repeat: -1
        };
        const leftconfig = {
            key: 'left',
            frames: this.anims.generateFrameNames('player',{start: 51, end: 54}),
            frameRate: 5,
            repeat: -1
        };
        const rightconfig = {
            key: 'right',
            frames: this.anims.generateFrameNames('player',{start: 17, end: 20}),
            frameRate: 5,
            repeat: -1
        };
        const downidleconfig = {
            key: 'downidle',
            frames: [{key: 'player',frame:0}],
            frameRate: 20
        };
        const upidleconfig = {
            key: 'upidle',
            frames: [{key: 'player',frame:34}],
            frameRate: 20
        };
        const leftidleconfig = {
            key: 'leftidle',
            frames: [{key: 'player',frame:51}],
            frameRate: 20
        };
        const rightidleconfig = {
            key: 'rightidle',
            frames: [{key: 'player',frame:17}],
            frameRate: 20
        };
        this.anims.create(downconfig);
        this.anims.create(upconfig);
        this.anims.create(leftconfig);
        this.anims.create(rightconfig);
        this.anims.create(downidleconfig);
        this.anims.create(upidleconfig);
        this.anims.create(leftidleconfig);
        this.anims.create(rightidleconfig);

```

My update() code:

```javascript
update(): void {
        this.player.setVelocity(0);        
        if(this.cursors.down.isDown){
            this.player.setVelocityY(80);
            this.player.anims.play('down',true);
        } else if(this.cursors.up.isDown){
            this.player.setVelocityY(-80);
            this.player.anims.play('up',true);
        }else if(this.cursors.left.isDown){
            this.player.setVelocityX(-80);
            this.player.anims.play('left',true);
        }else if(this.cursors.right.isDown){
            this.player.setVelocityX(80);
            this.player.anims.play('right',true);
        }
    }

```

previously I tried to play the idle animations by adding an else clause to each cursor key check but that did not work. How can I detect when the current cursor key is released?

---

<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:** [July 3, 2024, 8:26pm UTC](https://phaser.discourse.group/t/stop-animation-when-cursor-key-is-released/14492/2 "2024-07-03T20:26:54Z")

</div>

One way is [Phaser.Input.Keyboard.JustUp(key)](https://newdocs.phaser.io/docs/3.80.0/focus/Phaser.Input.Keyboard.JustUp).

Another would be to [check the current animation](https://newdocs.phaser.io/docs/3.80.0/focus/Phaser.Animations.AnimationState-getName "getName()") in a final `else` clause and play an idle animation if appropriate.