fbpx

How to create a revealing effect in elementor popup

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.

Here are some of my favorite website building tools

Thank you for reading the article hope you have found this helpful. Here are some of my favorite tools that I always use and hope you will find them helpful too. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission at no extra cost to you. I recommend these tools to my clients and friends as well.

Web Hosting: For starting a new website, I like to use GreenGeeks. They are reliable and affordable for a beginner. They have a very simple setup process that anyone can use. I’m personally using their service for over a year now.

Page Builder: For building beautiful websites in a short period of time I like to use Elementor. It is one of the most powerful page builders in the market. You don’t need any technical knowledge to make websites.

Content Writing: When you make a website you have to add content to it. I use Grammarly to write better content. It improves the writing by checking spelling and grammar mistakes automatically. It has a premium version but for starters, the free version is a good starting point.

Advertising Network: When you have built the website and have traffic on it, ads are the easiest way to monetize the website. Adsense is the most popular choice but I recommend Ezoic which will give you a much higher earning than Adsense and the best part is it is free to use.

You may also like

Picture of Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

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