How to make a popup in Elementor open with an animation from bottom to top

To make a popup in Elementor open with an animation from bottom to top, you can configure the popup's entrance animation settings. Here's how to achieve this:

Steps to Open Popup from Bottom to Top:

1. Edit Your Popup Template:

   • Navigate to Elementor > Templates > Popups.
   • Select and edit the popup template you created for the terms and conditions.

2. Set Entrance Animation:

   • In the popup editor, go to the Popup Settings panel (bottom-left corner).
   • Click the Settings tab.
   • Under the Entrance Animation dropdown, select Slide In Up.
   • Adjust the Animation Duration (e.g., 0.5s or 1s) for a smoother effect.

3. Preview the Animation:

   • Click the Preview button to test how the popup appears.
   • Ensure it slides up smoothly from the bottom of the screen.

4. Advanced (Optional) Custom CSS: If you need more control over the animation or want to enhance it further, you can use custom CSS:

   • In the Advanced tab of the Popup Settings, add this CSS:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

selector {     animation: slideUp 0.5s ease-in-out forwards; }   @keyframes slideUp {     from {         transform: translateY(100%);         opacity: 0;     }     to {         transform: translateY(0);         opacity: 1;     } }

Result:

The popup will smoothly slide up from the bottom to the top of the screen, creating a modern and interactive appearance.

Let me know if you'd like further customization!