# Set trigger on element outside the animated element Interaction

**URL:** <https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [January 14, 2022, 9:50am UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153 "2022-01-14T09:50:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 14, 2022, 9:50am UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/1 "2022-01-14T09:50:36Z")

</div>

@RobM@abirana

Example without Interactions that I Made you have to click the green clock icon in the header!  
testsite:  
[https://www.yourweblab.nl/sjef/index.html](https://www.yourweblab.nl/sjef/index.html)

Hi both,

Try to animate a opening hours panel that has to slide in from right lo left on click of a button (outside the animated element) and slide back by clicking a icon on the animated element.

How do I set the triggers? Because all I see now is the possibility to trigger the animated element on click and when I go to Custom event I can put in a other element, but I don’t see the trigger.

How do I achieve this with Interactions?

Regards & Thanks,

David

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 14, 2022, 11:18am UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/2 "2022-01-14T11:18:35Z")

</div>

Hi David,  
@AllMediaLab  
Not positive I fully get your question - nice animation by the way!  
So with Interactions you would set your entrance animation with the clock as a trigger and the floating schedule as a target. You can just select the opening hours by clicking on the target and selecting it on the page, or edit the selector. This last one is easiest using an id I found, so something like `$#uniqueId`. You can then select a premade animation like “slideInRight”.

If there was not a second trigger then you could alternate the animation. Instead, I think the easiest way to be able to have two triggers is to add a second animation and a class indicator. So open the Edit Animation panel and add another transition with a type of “set” then for the property select class → add class. Select whatever you want for the class name - I’ll use “hoursopen”. Then in the advanced options for trigger condition select “doesn’t have class” and add the class name as a value.

Now make a second interaction on the button click. Use the same target. Add your animation, for example “slideOutRight”. Then under advanced options select the trigger condition “has class” and add in the class name you picked. Then open the Edit Animation panel and add the remove class property.

Finally, add an Interaction to the close element. Trigger on click of the element, but target the whole schedule block - again I would use an id, but you can click on the target to select it on the page. For animation select the same animation you used on the button from the named animations list.

That should be it. Let me know if it works/is what you were having the problem with,  
Bob

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 14, 2022, 12:01pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/3 "2022-01-14T12:01:40Z")

</div>

@AllMediaLab checking your example I think your issue is solved if not do let us know.

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 14, 2022, 12:23pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/4 "2022-01-14T12:23:24Z")

</div>

Hi @RobM & @abirana,

[https://www.yourweblab.nl/hours](https://www.yourweblab.nl/hours)

No the problem is not solved, my demo was not with Interactions, I made a simple setup with Interactions and concentrate first on the first trigger to open the panel from right to left.

Problems:

- Hide at Start doesn’t function so the panel is visible instead of not visible. (only works on click now)
- When clicking on Click button [Starter Template for Bootstrap](https://www.yourweblab.nl/hours/) **#menu-toggle** appears in the  
browser, I rather have that not visible.
- I notice a horizontal scroll bar when the animation plays!

Thanks!

David

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 14, 2022, 12:27pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/5 "2022-01-14T12:27:26Z")

</div>

Ok on this example I can see the issue but the first link you shared [Sjef Diederen Margaten](https://www.yourweblab.nl/sjef/index.html) has the same implementation without any issue. That is also your work isn’t it?

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 14, 2022, 12:28pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/6 "2022-01-14T12:28:23Z")

</div>

Yes but no Interactions is used there! It was just to show what I want to achieve with Interactions.

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 14, 2022, 12:30pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/7 "2022-01-14T12:30:35Z")

</div>

Oh ok then let me check again.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 14, 2022, 12:34pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/8 "2022-01-14T12:34:25Z")

</div>

HI @AllMediaLab,  
Did you try my suggestions above? It doesn’t look like your Interactions match up. Also, instead of an anchor link, use a button as the trigger. That way you won’t get the change in the menu bar.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 14, 2022, 1:14pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/9 "2022-01-14T13:14:31Z")

</div>

@RobM here has already given you detailed step but your project got us confusing because you might have removed the script that you shouldn’t.

First off, you’ve set **Hide At Start** on the link not on the sliding block ( **#hours-open-wrap** ) but the main issue is that you’ve removed the script from the head section of the HTML. I’m talking about the scripts that PGIA places which make the PGIA work properly.

 ![Screen Shot 2022-01-14 at 6.42.17 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/52e8bb919b50122f362d3d16d4b40ca4929c4206.jpeg)

So in short you should apply **Hide At Start** to your sliding element not on the **Link**

And on the link trigger interaction, go to **Advance Options** and enable **Prevent default action** , so that **#menu-toggle** won’t appear on the browser address bar

And horizontal scroll is appearing because your element is going out of the view of browser. Applying position fixed would be best option here but if you don’t want that then you should apply **overflow: hidden** to the parent of that slider block.

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 14, 2022, 2:13pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/10 "2022-01-14T14:13:46Z")

</div>

Thanks for pointing that out it was there before and I did not remove it!

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [January 14, 2022, 2:21pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/11 "2022-01-14T14:21:22Z")

</div>

[![](https://media.giphy.com/media/ujUdrdpX7Ok5W/giphy.gif) ](https://media.giphy.com/media/ujUdrdpX7Ok5W/giphy.gif)

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 14, 2022, 2:35pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/12 "2022-01-14T14:35:08Z")

</div>

> [@abirana](#):
>
> So in short you should apply **Hide At Start** to your sliding element not on the **Link**

@abirana  
Can you please explain what trigger and target i need to set for that?

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 14, 2022, 2:44pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/13 "2022-01-14T14:44:02Z")

</div>

Did you mean only about **Hide At Start**? You are targeting **#hours-open-wrap** so you should apply to this.

By the way, for your removed script it should be best to start with a new project from PG. And copy those HTML elements inside the body.

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 14, 2022, 2:47pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/14 "2022-01-14T14:47:46Z")

</div>

@abirana  
Yes I will do that, but can I just set Hide At Start on a element without Interaction? I wanted to add a Interaction with auto opacity to #hours-open-wrap but without a trigger that doesn’t work. That’s why I ask How do I hide #hours-open-wrap what is the trigger because I can not click that same element.

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 14, 2022, 2:59pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/15 "2022-01-14T14:59:40Z")

</div>

For an interaction there are two things, one trigger and another target. In your case trigger is the link where you click and target where the animation happens.

So you apply interaction on the trigger, you’ve build your interaction to reveal the target (sliding block). But now you need it to be hidden when the page loads.

So if you want to hide an element, what would you do? Apply some CSS to hide the element or apply **Hide At Start** , so wherever you apply these properties that element will hide. So in your case you’ll have to hide your sliding element, so that you can reveal it with interaction.

By the way, have you tried and tested my suggestions?

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 14, 2022, 3:01pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/16 "2022-01-14T15:01:01Z")

</div>

@abirana

Yes it’s working now, only I can’t get rid of the horizontal scroll bar. Only when I apply `overflow-x: hidden;` to the body it is gone.

Only Hide At Start doesn’t work proper, you see a glimp of the element in the beginning of the animation. Close panel also works now!

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 14, 2022, 3:46pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/17 "2022-01-14T15:46:51Z")

</div>

I checked your live link, if that is update with what you’ve done then I still see that PGIA script is not there.

Did you fixed this issue?

> [@abirana](#):
>
> the main issue is that you’ve removed the script from the head section of the HTML. I’m talking about the scripts that PGIA places which make the PGIA work properly.
> 
> ![Screen Shot 2022-01-14 at 6.42.17 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/52e8bb919b50122f362d3d16d4b40ca4929c4206.jpeg)

This is what I advised you to do.

> [@abirana](#):
>
> By the way, for your removed script it should be best to start with a new project from PG. And copy those HTML elements inside the body.

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 14, 2022, 4:04pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/18 "2022-01-14T16:04:57Z")

</div>

Yes I have to start from scratch, because the code automatically disappears after save in Pinegrow when I paste the code in.

A have put it manually in with Sublime Text now.

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 14, 2022, 4:11pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/19 "2022-01-14T16:11:09Z")

</div>

While pasting I asked you to only copy the elements inside the body. And after you do that please check if it is there. If it is not there then something should be missing on what you did.

Anyway let if be, why don’t you just copy paste the below code on your existing page. Place is at end of the **head**.

```auto
<script>/* Pinegrow Interactions, do not remove */ (function(){try{if(!document.documentElement.hasAttribute('data-pg-ia-disabled')) { window.pgia_small_mq=typeof pgia_small_mq=='string'?pgia_small_mq:'(max-width:767px)';window.pgia_large_mq=typeof pgia_large_mq=='string'?pgia_large_mq:'(min-width:768px)';var style = document.createElement('style');var pgcss='html:not(.pg-ia-no-preview) [data-pg-ia-hide=""] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show=""] {opacity:1;visibility:visible;display:block;}';if(document.documentElement.hasAttribute('data-pg-id') && document.documentElement.hasAttribute('data-pg-mobile')) {pgia_small_mq='(min-width:0)';pgia_large_mq='(min-width:99999px)'} pgcss+='@media ' + pgia_small_mq + '{ html:not(.pg-ia-no-preview) [data-pg-ia-hide="mobile"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="mobile"] {opacity:1;visibility:visible;display:block;}}';pgcss+='@media ' + pgia_large_mq + '{html:not(.pg-ia-no-preview) [data-pg-ia-hide="desktop"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="desktop"] {opacity:1;visibility:visible;display:block;}}';style.innerHTML=pgcss;document.querySelector('head').appendChild(style);}}catch(e){console&&console.log(e);}})()</script>

```

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 14, 2022, 4:13pm UTC](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153/20 "2022-01-14T16:13:41Z")

</div>

Yes like I said I have done! Thank you!

About the missing code, when I work with Sublime Text I have these issues sometimes.

[Next page](https://forum.pinegrow.com/t/set-trigger-on-element-outside-the-animated-element-interaction/6153.md?page=2)