Tap to Hide Layer & Show Gif, then any subsequent taps pause/play gif

Nathan Boyd

Snap Lens Network Member Lens Studio Team

December 22, 2019 20:59

Hello,

Subject explains it pretty simply, but basically I have a bunch of image elements. When the lens first loads, I want image1 to be visible and image2 (a gif) to be hidden.

Then, on first tap, I want image1 to be hidden and image2 to be now visible and playing in a loop.

Then the next taps should toggle the playback state of the gif. tapping again and again should pause/play/pause the gif wherever it is at in it's playback :)

Any ideas? I've never written scripts in Lens Studio or in JS for that matter… any help would be appreciated!

- Nathan

Jacob Knipfing

Snap Lens Network Member Lens Studio Team

January 08, 2020 23:17

Hi Nathan,

You can do that using a script like this:

// @input Component.Image image1
// @input Component.Image image2

var tapCount = 0;

script.image1.enabled = true;
script.image2.enabled = false;

var image2Control = script.image2.mainPass.baseTex.control;

function onTap() {
    tapCount+=1;

    // Check if this is the first tap
    if (tapCount == 1) {
        script.image1.enabled = false;
        script.image2.enabled = true;
        image2Control.play(-1, 0);
    } else {
        if (image2Control.isPaused()) {
            image2Control.resume();
        } else {
            image2Control.pause();
        }
    }
}

script.createEvent("TapEvent").bind(onTap);

Let me know if you have any questions!

Jacob

Tap to Hide Layer & Show Gif, then any subsequent taps pause/play gif

We're here to help! We just need a little bit of information...

What system do you run Lens Studio on?

Follow the next steps to help us solve your issue:

Thanks for submitting this issue.

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!