fbpx

How to create a revealing effect in elementor popup

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

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

We will use the CSS clip-path property to create this revealing effect.

To achieve this result we will use some jQuery and CSS along with elementor popup, though you can use this technique on any section but you have to do bit more css tweaking.

Here is the code

body:not(.elementor-editor-active) .contact-popup{
	clip-path:circle(0% at 100% 0%);
	transition: all .6s ease-in-out;
}
body:not(.elementor-editor-active) .contact-popup.open{
	clip-path:circle(100%);
	transition: all .5s ease-in-out;
}
#close-btn{
	display:none;
	cursor:pointer;
}
#close-btn.visible{
	display:block;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  #open-btn a{
    border-radius:50%;
    height:40px;
    width:40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
  }
  #open-btn .elementor-button-text{
    display:none;
  }
  #open-btn .elementor-button-icon{
    margin:0;
    float:none;
  }
}
@media only screen and (max-width: 480px), screen and (max-device-width: 480px) {
  #open-btn a{
    border-radius:50%;
    height:40px;
    width:40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
  }
  #open-btn .elementor-button-text{
    display:none;
  }
  #open-btn .elementor-button-icon{
    margin:0;
    float:none;
  }
}
jQuery('#open-btn').click(function(){
  setTimeout(function(){
       jQuery('.contact-popup').addClass("open");
       jQuery('#close-btn').addClass("visible");	
   }, 100)
});
jQuery('#close-btn').click(function(){
  jQuery('.contact-popup').removeClass("open");
  jQuery(this).removeClass('visible');
});

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

6 thoughts on “How to create a revealing effect in elementor popup”

    1. Hi John,
      Glad you liked the concept, yes you can achieve the “Scale & Rotate Pusher” effect. But you have to understand the difference between the Tympanus demo and elementor html structure and add classes in different elements with jquery click event accordingly then create the effect with css. For creating a slide-in menu you can check this tutorial https://designtheway.com/off-canvas-menu-with-elementor/. I really like the concept and might consider creating a video tutorial in the future as well.

      Thanks for sharing the concept, hope this helps!

  1. Paweł Stańczuk

    It looks great! But how to get after clicking the ‘# close-btn’ reverse effect with the same transition ? After that whole animation would be complete.

  2. Paweł Stańczuk

    When I click on the button the animation works perfect, but when i click on the close button it closing without turn-back animation. Only instant closing popup screen. I don’t know where is the issue. On your tutorial works well in both sides.

    1. Hi Paweł, I checked once again on my dev site it is working perfectly, I would request you to go through the video once more to see if you are missing anything or not and also check if there is any js error that might cause the problem as well.

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