# Trigger interaction with javascript

**URL:** <https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209>\
**Category:** Plugins\
**Created:** [July 4, 2023, 11:00pm UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209 "2023-07-04T23:00:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnsantana](https://avatars.discourse-cdn.com/v4/letter/j/3bc359/32.png) [@johnsantana](https://forum.pinegrow.com/u/johnsantana)\
**Post date:** [July 4, 2023, 11:00pm UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/1 "2023-07-04T23:00:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\
**Post date:** [July 5, 2023, 6:25am UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/2 "2023-07-05T06:25:53Z")

</div>

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

> **[API | Pinegrow Web Editor](https://pinegrow.com/docs/interactions/api/)**
>
> Pinegrow Interactions comes with a simple API that lets you trigger animations from your code.

pgia.play(element, animation\_name);

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [July 11, 2023, 8:36am UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/3 "2023-07-11T08:36:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)\
**Post date:** [July 24, 2023, 3:13pm UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/4 "2023-07-24T15:13:39Z")

</div>

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

> **[Created on July 24, 2023 at 17:10](https://video.michelyweb.de/conversations/d0e1eb67-b6bd-58fe-88c5-9571308ab4e9)**
>
> By Marco Michely | Duration 14s

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/fa30dd91f85b3ce01423f604a8260cf6ecb4f94a.png)

Appreciate any help.

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [July 25, 2023, 7:55am UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/5 "2023-07-25T07:55:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)\
**Post date:** [July 25, 2023, 9:43am UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/6 "2023-07-25T09:43:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [July 25, 2023, 10:52am UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/7 "2023-07-25T10:52:44Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)\
**Post date:** [July 25, 2023, 12:50pm UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/8 "2023-07-25T12:50:57Z")

</div>

@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.

```auto
    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!
        }        
    });

```

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [July 25, 2023, 1:41pm UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/9 "2023-07-25T13:41:23Z")

</div>

Hashchange is nice. Glad you got it working.

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [September 27, 2023, 7:49pm UTC](https://forum.pinegrow.com/t/trigger-interaction-with-javascript/8209/10 "2023-09-27T19:49:40Z")

</div>

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.

[![](https://img.youtube.com/vi/3nMDdwwcYqs/maxresdefault.jpg "Webflow NEEDS This Feature!") ](https://www.youtube.com/watch?v=3nMDdwwcYqs)