fbpx

How to add a transition effect in elementor popup

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Do you want to add a custom transition effect on your elementor popup?

In this video, I’ll show you how you can add a transition effect in elementor popup with some CSS and jQuery.

For more detailed explanation of elementor popup and header structure check revealing effect is elementor popup.

Here is the code

.overlay{
background:#4632DA;
height: 100%;
width: 100%;
position: fixed;
z-index: 99999;
left: 100%;
top: 0;
}
#close-btn{ display:none; cursor:pointer; } #close-btn.visible{ display:block; } body.page-id-178:not(.elementor-editor-active) .team-popup{ left: 100%; } body.page-id-178:not(.elementor-editor-active) .team-popup .dialog-lightbox-message{ display:none; }
jQuery("#team-1 a, #team-2 a").click(function(){
  jQuery('.overlay').animate({left: '0'},400);
  jQuery('.overlay').delay(300).animate({left: '-100%'},400);
  setTimeout(function(){
       jQuery('.team-popup').animate({left: '0'},400);
       jQuery('.team-popup .dialog-lightbox-message').css({"display": "flex"},400);
   }, 600)
  setTimeout(function(){
       jQuery('#close-btn').addClass("visible");	
   }, 900)
});
jQuery('#close-btn').click(function(){
  jQuery(this).removeClass('visible');
  jQuery('.overlay').animate({left: '0'},400);
  jQuery('.overlay').delay(300).animate({left: '100%'},400);
  jQuery('.team-popup').delay(700).animate({left: '100%'});
  setTimeout(function(){
       jQuery('.team-popup .dialog-lightbox-message').css({"display": "none"});	
   }, 1200)
});

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

You may also like

Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

free wordpress training

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
website design illustration

Learn The Exact Steps I Follow To Create WordPress Websites

Easily create WordPress websites for yourself and others following my 2 hrs FREE WordPress Training (Video).