Can you animate a popup window in perspective?

Ignition
1

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.

2

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.

3

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

1 Like
4

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.

@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;
}
4 Likes
5

Very cool

6

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

7

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.

8

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

1 Like
9

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.

10

Have you tried using an Id?

11

What do you mean ?

12

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

13

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

14

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

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

15

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.

16

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 :

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

7 Likes
17

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!