Trigger interaction with javascript

Plugins
1

Sorry to have to ask this, but I have been pulling my hair out trying different ideas. Is it possible to trigger an interaction from javascript (or even html)? I don’t understand the custom event method. I expect that may be a way to do it, but all the custom event button does is ask for a value, and I don’t know if that means to enter a particular function or PG API entry.

This seems like it should be simple but it may not be possible or practical. Again, sorry I couldn’t figure this out myself. I’m afraid I need some pretty specific instructions. Thanks. JS

2

Hey, Yes, you can trigger an interaction with Javascript as described here:

pgia.play(element, animation_name);

1 Like
3

Interestingly I thought I’d made a video on this exact thing but turns out I didn’t or it’s not been released?!

I’ll see what that’s about but the answer above is correct if you don’t mind wading documentation

1 Like
4

Is it possible to play the animation reversed?
I want to close the panel seen in this video if a user clicks an Link:

The links are generated via JS code and i need to trigger the reversed animation in the “hashchange” event.

Tried pgia.play(el, 1); but this starts the animation from the beginning (the panel is opened again).

CleanShot 2023-07-24 at 17.15.58@2x
CleanShot 2023-07-24 at 17.15.58@2x1298×1580 189 KB

Appreciate any help.

5

Not that I’m aware of. You need to define another interaction and play that one

6

:disappointed_relieved:
For now i am doing a click() to the close button. That does the job.

7

Well you have the animation already defined on click. Can’t you just use that animationL

// loop through links...
// add click event to each link
// inside click event
pgia.play(document.getElementById('close-button'), 0)
8

@fakesamgregory I am sure that that’s exactly what i’ve done and reopened the panel… because of you I’ve tried it again and it works. Maybe i’ve done it wrong yesterday. Thank you.

Instead of the ‘click’ event I use the ‘hashchange’ but that does not matter.

    window.addEventListener("hashchange", (evt) => {
        updateActiveEl(list);
        let el = document.querySelector('#toc-trigger');
        if(el.className === 'toc-trigger--opened') {
            //el.click();
            pgia.play(el, 'trigger toc'); // THIS WORKS TODAY!
        }        
    });
9

Hashchange is nice. Glad you got it working.

10

Just in case people stumble across this, I managed to make a simple tutorial triggering interactions with JavaScript.

It’s packaged as a Webflow video just because the algorithm works for me that way but is basically a Pinegrow tutorial.

4 Likes