Magnific popup fade effect on inline gallery mode

Question

I am using magnific popup for inline gallery. But there is not any effect. I need to fade effect while open/close popup. How can i achieve, can you help me with that?

https://jsfiddle.net/gbp31r8n/3/

   [Here is fiddle link][1]      

Answer 1

You can try this.

First you need to create close and open animation.

and then add the animation to .white-popup-block when popout is open and then add the animation to .mfp-removing when the popup is closing.

.white-popup-block {
  background: #ccc;
  padding: 20px;
  max-width: 300px;
  margin: 0 auto;

  animation: open 1s;
}

.mfp-removing{
  animation: close 1s;
}

@keyframes open {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes close {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}

After that you need to create a delay using removalDelay and make it 900, since keyframe animation is 1s, I set the delay to 900ms delay should be less than the keyframe animation time.

$('.popup-with-content').magnificPopup({
        type: 'inline',
        preloader: false,
        gallery:{enabled:true},
        removalDelay: 900,
        callbacks: {
            beforeOpen: function() {
                this.st.mainClass = this.st.el.attr('data-effect');
            }
          },
    });

Please see this fiddle https://jsfiddle.net/gbp31r8n/26/

Hope this helps.