Animation when opening and closing modals?

Nicepage does not support it, unfortunately.

I am unsure, but maybe it will work with Custom CSS.

https://webcode.tools/generators/css/keyframe-animation

Hi Anthony,

Thanks for the suggestions, we'll add them to our wishlist.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Make a modal with no background-color, so that it's invisible. Place a box in the modal with the desired background and animate the box. Place all the stuff you need inside the box. The whole modal resp. the box with everything in it is animated. The transition of the shading is still hard, but everything else seems a bit smoother.

Make a modal with no background-color, so that it's invisible. Place a box in the modal with the desired background and animate the box. Place all the stuff you need inside the box. The whole modal resp. the box with everything in it is animated. The transition of the shading is still hard, but everything else seems a bit smoother.

I like it, is that what's called "thinking inside the box" lol

Thanks

Last edited 25 January 2023 by Tony

With this code you can animate the complete popup. The shadow as well as the popup, without having to include a box. You can only give the popup a background color.

Add the code in the Global CSS of the Nicepage page. You can find it in the site settings.

    .u-dialog-open {
    animation: fadein 0.5s ease 0s 1 normal forwards;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

With this code you can animate the complete popup. The shadow as well as the popup, without having to include a box. You can only give the popup a background color.

Add the code in the Global CSS of the Nicepage page. You can find it in the site settings.

    .u-dialog-open {
  animation: fadein 0.5s ease 0s 1 normal forwards;
}

@keyframes fadein {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}

Thanks xvemanuelvx, that works a treat