# Can you animate a popup window in perspective?

**URL:** <https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 12, 2023, 7:49pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925 "2023-06-12T19:49:43Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mason\_Melancon](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@Mason\_Melancon](https://forum.inductiveautomation.com/u/Mason_Melancon)\
**Post date:** [June 12, 2023, 7:49pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/1 "2023-06-12T19:49:43Z")

</div>

I am trying to figure out a way to put an animation on a popup window in perspective. Whenever the user clicks a button I would like the popup to slow animate from the top of the screen around 150-200px down the screen.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [June 12, 2023, 8:00pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/2 "2023-06-12T20:00:39Z")

</div>

You'll want to search the forum for CSS animations, there should be plenty of threads regarding this. It would be very helpful to introduce yourself with CSS and style classes in Ignition if you haven't already.

---

<div class="post-metadata">

**Author:** ![Ryan\_Allen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_allen/32/47013_2.png) [@Ryan\_Allen](https://forum.inductiveautomation.com/u/Ryan_Allen)\
**Post date:** [June 12, 2023, 10:09pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/3 "2023-06-12T22:09:01Z")

</div>

As far as I know, you can't animate the popup itself, only the contents of the popup. If you learn otherwise please let me know

---

<div class="post-metadata">

**Author:** ![Carl\_Geib](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Carl\_Geib](https://forum.inductiveautomation.com/u/Carl_Geib)\
**Post date:** [June 13, 2023, 12:08am UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/4 "2023-06-13T00:08:20Z")

</div>

I haven't done much with this, but I just did a quick test and you can add an animation to the .ia\_popup class and it will animate the popup "window" itself.

For example I added the theme/app/popup.css into my custom theme with the below code and it animates the popup itself.

```auto
@keyframes popUp_fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}

@-webkit-keyframes popUp_fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        -webkit-transform: scale(1);
        opacity: 1; 
    }       
}

.ia_popup {
    animation-name: popUp_fadeIn;
    -webkit-animation-name: popUp_fadeIn; 
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

```

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [June 13, 2023, 12:38am UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/5 "2023-06-13T00:38:15Z")

</div>

Very cool

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 13, 2023, 6:31am UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/6 "2023-06-13T06:31:31Z")

</div>

The only issue with this is that it will apply to ALL popups.  
I'm not sure there's a work around to apply it to only a specific popup...

---

<div class="post-metadata">

**Author:** ![Carl\_Geib](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Carl\_Geib](https://forum.inductiveautomation.com/u/Carl_Geib)\
**Post date:** [June 13, 2023, 8:14am UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/7 "2023-06-13T08:14:03Z")

</div>

True, it's not entirely clear from the original post if they wanted it on all popups or just specific ones. I agree though, if they only want it on specific popups, I'm not sure if there is a way to do it, but I haven't dug much into it, so it's hard to say.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 13, 2023, 9:19am UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/8 "2023-06-13T09:19:08Z")

</div>

Apparently popups have an id in the form `popup-{id}`, so you could use a specific popup id for this one and target it. Easy !  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/1/41351cedfd1ecd242e8e8376ce487e0858759b49.png)

---

<div class="post-metadata">

**Author:** ![Carl\_Geib](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Carl\_Geib](https://forum.inductiveautomation.com/u/Carl_Geib)\
**Post date:** [June 13, 2023, 9:25am UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/9 "2023-06-13T09:25:25Z")

</div>

I remember seeing the field for the popup ids, but I hadn't really thought about what they might be used for. This seems like a pretty good example of a use case.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [June 13, 2023, 2:47pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/10 "2023-06-13T14:47:05Z")

</div>

Have you tried using an Id?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 13, 2023, 2:48pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/11 "2023-06-13T14:48:03Z")

</div>

What do you mean ?

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [June 13, 2023, 2:50pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/12 "2023-06-13T14:50:28Z")

</div>

Have you tested using specific Ids, you posted about specifying a specific popup Id, I'm curious if you tested and if it worked.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 13, 2023, 2:51pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/13 "2023-06-13T14:51:24Z")

</div>

I haven't, but I can try. I don't see why it would fail though.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 13, 2023, 2:59pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/14 "2023-06-13T14:59:37Z")

</div>

Just tried with basic css properties and it works as expected.

edit: And so does the animation provided above by @Carl_Geib

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [June 13, 2023, 3:52pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/15 "2023-06-13T15:52:13Z")

</div>

So how exactly are you using the animation provided by Carl to target a specific popup? I know you said Id, but are you doing this in a stylesheet, or on the component itself?

I'm wondering how intensive this would be to select specific popups and for projects with a bunch of popups.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 13, 2023, 3:56pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/16 "2023-06-13T15:56:07Z")

</div>

let's say you give your popup `foo` as an id.  
Just replace `.ia_popup` with `#popup-foo` as the selector in @Carl_Geib's code.  
And yes, in the stylesheet.

If you want to apply that transform to a bunch of popups, let's say `foo`, `bar`, `baz`, `pox` and `wuz`, you can use this as the selector :

```css
#popup-foo, #popup-bar, #popup-baz, #popup-pox, #popup-wuz {
    css properties here
}

```

edit, just in case:  
There are different ways of selecting your popups.  
If there are many of them, or their ids are dynamic, you could try and prefix the id to then be able to use attribute selectors, ie: `div[id^='popup-prefix']`, but be aware that the specificity is not the same as an id selector.  
If your users are not using firefox (or old chromium browsers), you could also use `:has` to target popups that contain a component with a specific class.

---

<div class="post-metadata">

**Author:** ![Mason\_Melancon](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@Mason\_Melancon](https://forum.inductiveautomation.com/u/Mason_Melancon)\
**Post date:** [June 13, 2023, 6:11pm UTC](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925/17 "2023-06-13T18:11:13Z")

</div>

I am doing the same thing now and accessing the code through vs code following the #popup-ID works well since I ran into the issue this morning whenever I was trying to manipulate the code in ia\_popup, it would not save the changes I made and if I created a new popup my changes would be overridden. I am able to change any property for any popup for a specific popup using the ID! Thanks!