There are couple of use scenarios for popups that might require you to add fade-in and fade-out effect for the overlay.
As you know, the popups in Elementor Pro are using a modal Lightbox which holds the elements and widgets. Sometimes you might need to add some animation the Lightbox overlay like fading, blur, etc.
How to apply fade-in and fade-out to Elementor Popup overlay
To apply the Fade animation effect on the Elementor popup Lightbox overlay, we need to add some CSS snippet. There are many ways of adding custom CSS code in WordPress.
How to add custom CSS in Elementor PRO
Elementor PRO comes with options to insert the your custom CSS in couple of ways. The easiest one is by accessing the Site Settings options by clicking on hamburger menu icon in the top left corner. Then just access the Custom CSS tab and you will see the field for adding Global custom CSS in Elementor.
Once you are inside the Site Settings, access Custom CSS option and paste this code in the field:
/*
Make Elementor Pop-up overlay fade-in and fade-out CSS
CSS Snippet by Worda Themes
*/
.elementor-popup-modal:not([style="display: none;"]) {
transition: all .3s;
opacity: 1!important;
}
div.elementor-popup-modal[style="display: none;"] {
transition: all .3s;
opacity: 0;
display: flex!important;
z-index: -5;
}
.elementor-popup-modal[style="display: none;"]>div {
display:none
}
.elementor-popup-modal {
-webkit-animation:wrd_fadein .5s cubic-bezier(.39,.575,.565,1.000);
animation:wrd_fadein .5s cubic-bezier(.39,.575,.565,1.000)
}
@-webkit-keyframes wrd_fadein {
0%{opacity:0}
100% {opacity:1}
}
@keyframes wrd_fadein{
0% {opacity:0} 100%
{opacity:1}
}
The solution works right out of the box, but you can tweak the values to match your desired colors, animation duration and other fine tuning.
Once you apply adjustments to the CSS code, just hit Update button and clear the cache on your website and browser.
Once you trigger your popup you should see the nice fade-in effect and fade-out on exit.
Conclusion
This comes as a quick solution which doesn’t require much tweaking. If you know some better way of making fading animation for Elementor Popup overlay or you have any thoughts, feel free to leave a comment below.
