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:

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!