# How make a shiny animation for gameobject such as image

**URL:** <https://phaser.discourse.group/t/how-make-a-shiny-animation-for-gameobject-such-as-image/7401>\
**Category:** Phaser 3\
**Created:** [September 11, 2020, 11:04pm UTC](https://phaser.discourse.group/t/how-make-a-shiny-animation-for-gameobject-such-as-image/7401 "2020-09-11T23:04:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![conganhpham](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/conganhpham/32/3944_2.png) [@conganhpham](https://phaser.discourse.group/u/conganhpham)\
**Post date:** [September 11, 2020, 11:04pm UTC](https://phaser.discourse.group/t/how-make-a-shiny-animation-for-gameobject-such-as-image/7401/1 "2020-09-11T23:04:22Z")

</div>

I want to make a shiny animation for a game object such as image as in this html5 example when hover image [shiny image when hovering](https://codepen.io/ejke/pen/PbRXxd) but I don’t know where to start

---

<div class="post-metadata">

**Author:** ![mapacarta](https://avatars.discourse-cdn.com/v4/letter/m/41988e/32.png) [@mapacarta](https://phaser.discourse.group/u/mapacarta)\
**Post date:** [September 12, 2020, 10:15am UTC](https://phaser.discourse.group/t/how-make-a-shiny-animation-for-gameobject-such-as-image/7401/2 "2020-09-12T10:15:15Z")

</div>

You can make such a thing by using a mask. Something like this should work(just paste this to any sample on [labs.phaser.io](http://labs.phaser.io) 😄 )

```
var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 640,
    height: 480,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload() {

    this.load.image('bunny', 'assets/sprites/bunny.png');
    this.load.image('checker', 'assets/pics/checker.png');
    this.load.image('arrow', 'assets/sprites/arrow.png');
}

function create() {

    var checker = this.make.image({
        x: game.config.width / 2,
        y: game.config.height / 2,
        key: 'checker',
        add: true
    });

    var bunny = this.make.sprite({
        x: game.config.width / 2, 
        y: game.config.height / 2, 
        key: 'bunny',
        add: true
    });

    let arrow = this.add.image(100,100,'arrow').setScale(10,1);
    arrow.rotation = -Math.PI/4;

    

    arrow.mask = new Phaser.Display.Masks.BitmapMask(this, bunny);
    
    bunny.setInteractive();
    bunny.on('pointerover', ()=>{
        arrow.x = -10;
        arrow.y = -10;     
        this.tweens.killTweensOf(arrow);   
        this.tweens.add({
            targets: arrow,
            x: 500,
            y: 500,
            duration:1000,
        });
    })

}

```

Instead of the arrow you should use a gradient type of image like in the example.

---

<div class="post-metadata">

**Author:** ![conganhpham](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/conganhpham/32/3944_2.png) [@conganhpham](https://phaser.discourse.group/u/conganhpham)\
**Post date:** [September 12, 2020, 11:15am UTC](https://phaser.discourse.group/t/how-make-a-shiny-animation-for-gameobject-such-as-image/7401/3 "2020-09-12T11:15:02Z")

</div>

Thank you for your help