JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.9.4/phaser.js"></script>

JavaScript

var game = new Phaser.Game(600, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render:render});


function preload() {

    game.stage.backgroundColor = '#000000';

   game.load.image('arrow', 'http://www.html5gamedevs.com/uploads/monthly_2018_06/arrow0.png.e73f1f1d4f0de2c796982a9ed6f0c654.png');
    
}



function create() {

    game.stage.backgroundColor = '#000';

   
     arrow = game.add.image(90, 36, 'arrow'); 
 
      widtharrow = new Phaser.Rectangle(0, 0,arrow.width, arrow.height); 
 
     arrow.cropEnabled = true;
     arrow.crop(widtharrow);     
     arrow.fixedToCamera = true;
    
     widtharrow.width = 0; 
    
    game.time.events.loop(100,  function() {
	  game.add.tween(widtharrow).to( { width: (widtharrow.width + 60) }, 100, Phaser.Easing.Linear.None, true);
			}, this);     

}


function update() {
arrow.updateCrop();

if(widtharrow.width >= 300){
  game.add.tween(widtharrow).to( { width: (widtharrow.width - arrow.width) }, 200, Phaser.Easing.Linear.None, true);
}

}

function render() {


}