Is it possible to change the animation for an opening and closing Modal Pop-up?

0
Hi there,   I'm making a page using a Layout Type of Modal pop-up, extending PopupLayout from the Atlas_Core... By default, every moda/pop-up opens and closes with a Fade animation. I would like to have this animation effect as a Slide animation, but i can't seem to find a way to do it, nor any configuration possible for this.   Any suggestions?
asked
1 answers
0

Try customizing your styling and put something like this animation in your scss:

.modal-dialog {
  animation: slidein 0.5s ease-in forwards;
}

@keyframes slidein {
  from {
    left: 0;
  }

  to {
    left: 35%;
  }
}

Depending on the width of your screen and/or popup this won't put the popup exactly in the center of your screen, so you'll have to tinker with it, but you get the idea. Create the start and end situation in an @keyframes and use that to define your animation.

Edit: or try targeting the first child class of modal-dialog like this:

.modal-content {
  animation: slidein 0.5s ease-in forwards;
}

@keyframes slidein {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

 

answered