Trying to get what frame is playing on animation pause

[facecjf]

I'm new to Phaser 3 and JS in general, so I apologize if I come off super noobish.
I'm trying to wrap my head around animations and how to get specific data from an animation (like, frame number, image/frame displayed on pause) 

I have a sprite sheet that holds all the animations. Each of the six animations is only 2 frames. I have serious limitations in terms of size and how I pack the final "game" (I'm trying to meet facebook's playable ad requirements - a single html file - so I'm using the "assets as data uri" template as a starting point.)

Below is how I am handling my animation (I feel as though it's wrong)  I searched for examples of how to trigger the next animation when an animation is complete. 

 

function createGameObjects ()
{
    bg = this.add.image(512, 512, 'bg');
    logo = this.add.image(512, 920, 'logo');
    popUp = this.add.image(512, 460, 'popUp');
    popUp.depth = -1;
    /*
    var data = this.cache.json.get('itemsData');
    this.anims.fromJSON(data);
    */
    let gearHelm = {
        key: 'helm',
        frames: this.anims.generateFrameNumbers('items', { frames: [1, 8, 8, 8, 8, 8, 8 ] }),
        frameRate: 12,
        repeat: -1
    };
    let gearTop = {
        key: 'top',
        frames: this.anims.generateFrameNumbers('items', { frames: [7, 11, 7, 7, 7, 7, 7] }),
        frameRate: 12,
        repeat: -1
    };
    let gearPants = {
        key: 'pants',
        frames: this.anims.generateFrameNumbers('items', { frames: [ 5, 5, 9, 5, 5, 5, 5] }),
        frameRate: 12,
        repeat: -1
    };
    let gearBoots = {
        key: 'boots',
        frames: this.anims.generateFrameNumbers('items', { frames: [0, 0, 0, 4, 0 ,0, 0] }),
        frameRate: 12,
        repeat: -1
    };
    let gearRing = {
        key: 'ring',
        frames: this.anims.generateFrameNumbers('items', { frames: [2, 2, 2, 2, 6, 2, 2] }),
        frameRate: 12,
        repeat: -1
    };
    let gearSword = {
        key: 'sword',
        frames: this.anims.generateFrameNumbers('items', { frames: [ 10, 10, 10, 10, 10, 3, 10] }),
        frameRate: 12,
        repeat: -1
    };
    
    this.anims.create(gearHelm);
    this.anims.create(gearTop);
    this.anims.create(gearBoots);
    this.anims.create(gearPants);
    this.anims.create(gearRing);
    this.anims.create(gearSword);
    
    // timed event to handle animation
    timedEvent = this.time.addEvent({ delay: 0, callback: onEvent, callbackScope: this, loop: false });

    // log anim item
     console.log(gearSword);
}


// update
function frameUpdateCallback (sprite, animation)
{
    
}
// on event
function onEvent ()
{
    this.add.sprite(512, 192, 'items').play('helm');
    this.add.sprite(768, 320, 'items').play('top');
    this.add.sprite(768, 576, 'items').play('pants');
    this.add.sprite(512, 704, 'items').play('boots');
    this.add.sprite(256, 576, 'items').play('ring');
    this.add.sprite(256, 320, 'items').play('sword');

    // pause on click / touch
    var _anims = this.anims;
    this.input.on('pointerup', function () {
        if (_anims.paused)
        {
            _anims.resumeAll();
            animStopped = false;
            console.log(animStopped);
            popUp.depth = -1;
            bg.setAlpha(1);
        }
        else
        {
            _anims.pauseAll();
            animStopped = true;
            console.log(animStopped);
            console.log(_anims.key);
            popUp.depth = 4;
            bg.setAlpha(0.5);
        }
    });
}

I've also attached an animated gif to show what I am trying to achieve. 

Animation loops and continues until user clicks - then a popup shows. I would like to display the  image of the animation frame within the popup box based on where it's paused at. So if I click and stop on item 6 - then display popup with item 6.
Again excuse my noobish question which I'm sure is rather easy - I'm trying, and eager to learn. 
PS - I am coming from Construct :)~

Thanks in advance!