How to make card flip animation in Phaser 3 - phaser-framework

Question

I'm trying to make a card flip when is touched (working on mobile). So far I've only been able to change one frame for another (front to back), without any transition, so it feels unnatural. The idea is that you touch the screen, a card shows up, then ou touch it again and the card slowly flips, so you can see something in the back of the card.
I'm using the latest iteration of Phaser 3.
I have a working example, but it's made in Phaser 2, so I'm having a really hard time trying to update the code to Phaser 3.
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('fondo', 'img/backgroundhome.png');
this.load.spritesheet('carta', 'img/spritesheet.png', { frameWidth: 196, frameHeight: 339 });
this.load.image('reverso', 'img/reversecard.png');
}
function create() {
this.add.image(400, 300, 'fondo');
let cartaObj = this.add.image(75, 100, 'carta').setOrigin(0, 0).setInteractive();
this.anims.create({
key: 'frente',
frames: this.anims.generateFrameNumbers('carta', { start: 0, end: 0 }),
frameRate: 1,
repeat: -1
});
this.anims.create({
key: 'atras',
frames: this.anims.generateFrameNumbers('carta', { start: 1, end: 1 }),
frameRate: 1,
repeat: -1
});
var tween1 = this.scene.tweens.add({
targets: cartaObj,
scaleX: 10,
scaleY: 10,
ease: 'Linear',
duration: 300,
repeat: 0,
yoyo: false
});
cartaObj.once('pointerup', cargaAnim, this);
}
function cargaAnim() {
tween.start();
}
Tap the screen, show up a card (in this case a have a spritesheet with 2 frames, front and back), tap the card again and it flips slowly to show the back of the card.

Answer 1

I'm not very familiar with Phaser3 yet, but in Phaser2 I made something like this, see the level icons animation in this game. Basically the idea is to:
add a tween to 'fold' the card sprite (scale width to 0.0)
add onComplete function to tween
in onComplete function change sprite frame to show the card and..
..start another tween to 'unfold' the card (scale width to 1.0)
So something like:
// scale horizontally to disappear
var tween1 = this.scene.tweens.add({
targets: cartaObj,
scaleX: 0.01,
ease: 'Linear',
duration: 300,
repeat: 0,
yoyo: false
});
tween1.onComplete.add(function(){this.onTurnCard(cartaObj);}, this);
onTurnCard: function(card) {
// set card face somehow
card.frameName = 'HeartQueen'; // ?
// scale horizontally to re-appear
var twn = this.scene.tweens.add({
targets: card,
scaleX: 1.0,
ease: 'Linear',
duration: 300,
repeat: 0,
yoyo: false
});
// do something on complete
twn.onComplete.add(function(){this.onTurnCardCompleted(card);}, this);
}
onTurnCardCompleted: function(card) {
// do something, show text, add score etc.
if (card.frameName == 'HeartQueen') {
// ?
};
}