Pause and Continue Animation

Phaser 3
1

Hello! I want to implement something where a certain moving obstacle’s animation will pause/stop and it will also stop moving when it collides with a star. It resumes its animation and movement after a certain period of time. However, the moving obstacles starts moving at its paused frame and only will its animation resume after some time.

I have attached an example below.

Example:
(asking.mp4 - Google Drive)

Codes:

  function create() {
        obstacle = this.physics.add.sprite(100, 450, 'obstacles');
        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('obstacles', { start: 5, end: 8 }),
            frameRate: 10,
            repeat: -1
        });  
        stars = this.physics.add.image(400,400,'star')
        this.physics.add.overlap(obstacle, stars, collectStar, null, this);
        obstacle.setVelocityX(40);
        obstacle.anims.play('right', true);
    }

   var obstacleresume;
   function collectStar() {
        obstacle.anims.pause();
        obstacle.setVelocityX(0);
        obstacleresume= this.time.addEvent({ delay: 1000, callback: continueAvatar, callbackScope: 
      this });
   }

   function continueAvatar() {
        obstacle.anims.resume()
        this.time.addEvent({ delay: 15000, callback: continueAvatarspeed, callbackScope: this });
    }

   function continueAvatarspeed() {
        obstacle.setVelocityX(40);
    }

I have been struggling with this problem. Any help is appreciated. Thank you very much !!