Brave Search

Magnific popup fade effect on inline gallery mode

stackoverflow.com › questions › 49091938 › magnific-popup-fade-effect-on-inline-gallery-mode

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.

Answer from davecar21 on Stack Overflow

CodePen

codepen.io › MATEY15 › pen › oBQqgd

magnific-popup fade-slide

#small-dialog { background: white; padding: 20px 30px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; } .mfp-hide { display: none; } /** * Fade-zoom animation for first dialog */ /* start state */ .my-mfp-zoom-in .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-r

Stack Overflow

stackoverflow.com › questions › 49091938 › magnific-popup-fade-effect-on-inline-gallery-mode

Magnific popup fade effect on inline gallery mode

Top answer

1 of 5

I ran into this same problem and after banging my head against all the hard surfaces in my office I discovered that I need to rename the css classes to match the fade example he provided here.

So for example the mfp-zoom-out animation:

.mfp-zoom-out .mfp-with-anim should be .mfp-zoom-out.mfp-bg

.mfp-zoom-out.mfp-bg stays the same

.mfp-zoom-out.mfp-ready .mfp-with-anim should be .mfp-zoom-out.mfp-ready .mfp-content

.mfp-zoom-out.mfp-ready.mfp-bg should be .mfp-zoom-out.mfp-bg.mfp-ready

.mfp-zoom-out.mfp-removing .mfp-with-anim should be .mfp-zoom-out.mfp-removing .mfp-content

.mfp-zoom-out.mfp-removing.mfp-bg should be .mfp-zoom-out.mfp-bg.mfp-removing

2 of 5

Check i have code for Fade-zoom animation for first dialog and Fade-move animation for second dialog.

You can get magnific-popup.css and magnific-popup.min.js files in the dist folder...Files can be downloaded from https://github.com/dimsemenov/Magnific-Popup

<html lang="en">
<head>
    <title><!-- Insert your title here --></title>




 <link rel="stylesheet" href="magnific-popup.css"> 


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


<script src="jquery.magnific-popup.min.js"></script>



</head>
<body>

   <div class="example gc3">
    <h3>Dialog with CSS animation</h3>

    <div class="html-code">
      <a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>
      <a class="popup-with-move-anim" href="#small-dialog" >Open with fade-slide animation</a>

      <!-- dialog itself, mfp-hide class is required to make dialog hidden -->
      <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
        <h1>Dialog example</h1>
        <p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
      </div>
    </div>

    <script type="text/javascript">
      $(document).ready(function() {
        $('.popup-with-zoom-anim').magnificPopup({
          type: 'inline',

          fixedContentPos: false,
          fixedBgPos: true,

          overflowY: 'auto',

          closeBtnInside: true,
          preloader: false,

          midClick: true,
          removalDelay: 300,
          mainClass: 'my-mfp-zoom-in'
        });

        $('.popup-with-move-anim').magnificPopup({
          type: 'inline',

          fixedContentPos: false,
          fixedBgPos: true,

          overflowY: 'auto',

          closeBtnInside: true,
          preloader: false,

          midClick: true,
          removalDelay: 300,
          mainClass: 'my-mfp-slide-bottom'
        });
      });
    </script>

    <style type="text/css">
      /* Styles for dialog window */
      #small-dialog {
        background: white;
        padding: 20px 30px;
        text-align: left;
        max-width: 400px;
        margin: 40px auto;
        position: relative;
      }


      /**
       * Fade-zoom animation for first dialog
       */

      /* start state */
      .my-mfp-zoom-in .zoom-anim-dialog {
        opacity: 0;

        -webkit-transition: all 0.2s ease-in-out; 
        -moz-transition: all 0.2s ease-in-out; 
        -o-transition: all 0.2s ease-in-out; 
        transition: all 0.2s ease-in-out; 



        -webkit-transform: scale(0.8); 
        -moz-transform: scale(0.8); 
        -ms-transform: scale(0.8); 
        -o-transform: scale(0.8); 
        transform: scale(0.8); 
      }

      /* animate in */
      .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
        opacity: 1;

        -webkit-transform: scale(1); 
        -moz-transform: scale(1); 
        -ms-transform: scale(1); 
        -o-transform: scale(1); 
        transform: scale(1); 
      }

      /* animate out */
      .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
        -webkit-transform: scale(0.8); 
        -moz-transform: scale(0.8); 
        -ms-transform: scale(0.8); 
        -o-transform: scale(0.8); 
        transform: scale(0.8); 

        opacity: 0;
      }

      /* Dark overlay, start state */
      .my-mfp-zoom-in.mfp-bg {
        opacity: 0.001; /* Chrome opacity transition bug */
        -webkit-transition: opacity 0.3s ease-out; 
        -moz-transition: opacity 0.3s ease-out; 
        -o-transition: opacity 0.3s ease-out; 
        transition: opacity 0.3s ease-out;
      }
      /* animate in */
      .my-mfp-zoom-in.mfp-ready.mfp-bg {
        opacity: 0.8;
      }
      /* animate out */
      .my-mfp-zoom-in.mfp-removing.mfp-bg {
        opacity: 0;
      }



      /**
       * Fade-move animation for second dialog
       */

      /* at start */
      .my-mfp-slide-bottom .zoom-anim-dialog {
        opacity: 0;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;

        -webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
        -moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
        -ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
        -o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
        transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );

      }

      /* animate in */
      .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
        opacity: 1;
        -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
        -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
        -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
        -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
        transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
      }

      /* animate out */
      .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
        opacity: 0;

        -webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
        -moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
        -ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
        -o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
        transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
      }

      /* Dark overlay, start state */
      .my-mfp-slide-bottom.mfp-bg {
        opacity: 0.01;

        -webkit-transition: opacity 0.3s ease-out; 
        -moz-transition: opacity 0.3s ease-out; 
        -o-transition: opacity 0.3s ease-out; 
        transition: opacity 0.3s ease-out;
      }
      /* animate in */
      .my-mfp-slide-bottom.mfp-ready.mfp-bg {
        opacity: 0.8;
      }
      /* animate out */
      .my-mfp-slide-bottom.mfp-removing.mfp-bg {
        opacity: 0;
      }
    </style>
  </div>



</body>
</html>

Kriesi

kriesi.at › home › topics › enfold › graceful transition for pop up modals

Graceful transition for pop up modals - Support | Kriesi.at - Premium WordPress Themes

April 21, 2020 - function add_lightbox_effect() { ?> <script type="text/javascript"> (function($) { $(window).load(function(){ $('.inline-popups').magnificPopup({ delegate: 'a', removalDelay: 500, mainClass: 'mfp-3d-unfold', type:'inline', midClick: true, }); $(document).on('click', '.popup-modal-dismiss', function (e) { $.magnificPopup.close(); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_lightbox_effect');

Find elsewhere

Google Bing Mojeek

reddit.com › r › web_design › comments › 1h1am6 › magnific_popup_css3_animation_effects

r/web_design - Magnific Popup CSS3 animation effects

June 26, 2013 - The DOM structure made it a bit tricky for me to try, but have you thought about maybe using pointer-events: none; on the fade-out so the interface doesn't have to wait for the fade to complete to be interactive again? To simulate what I mean, while a popup is up, click a link in the background twice.

CodePen

codepen.io › dimsemenov › pen › kVbqdN

CSS3 animation effects for Magnific Popup

}); // Hinge effect popup $('a.hinge').magnificPopup({ mainClass: 'mfp-with-fade', removalDelay: 1000, //delay removal by X to allow out-animation callbacks: { beforeClose: function() { this.content.addClass('hinge'); }, close: function() { this.content.removeClass('hinge'); } }, midClick: true });

GitHub

github.com › dimsemenov › Magnific-Popup › issues

dimsemenov/Magnific-Popup

Light and responsive lightbox script with focus on performance. - dimsemenov/Magnific-Popup

Author dimsemenov

Simmons University

web.simmons.edu › ~grovesd › comm244 › notes › week13 › magnific › magnific

How to Use Magnific | Comm244 Notes

Copy the magnific-popup.css file into your CSS folder.

Design Link Work

designlink.work › magnific-popup-3

Magnific Popup #3. CSS3-based animation effects - Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself. Here we summarize the CSS3-based animation settings. | Design Link Work

March 1, 2018 - Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself. Here we summarize the CSS3-based animation settings.

GitHub

github.com › dimsemenov › Magnific-Popup › issues › 1087

MagnificPopup.close and fade from another button · Issue #1087 · dimsemenov/Magnific-Popup

September 24, 2018 - Hi, i'm trying to use another element outside the popup as the close button. I'm able to add the close function, but it close right away, without waiting for the animation to complete, so ther's no fading. If i leave the alert message, after closing it it fades away like i want. Is there something i'm missing? var closePopup = function() { $.magnificPopup.close(); // Close popup that is currently opened }; $hamburger.magnificPopup({ removalDelay: 500, mainClass: 'mfp-fade', items: { src: '#navigation', type: 'inline' }, callbacks: { open: function() { // Will fire when this exact popup is opened // this - is Magnific Popup object //alert('ok'); $hamburger.bind('click',closePopup); $hamburger.toggleClass("is-active"); }, close: function() { $hamburger.unbind("click",closePopup); $hamburger.toggleClass("is-active"); } // e.t.c.

Author uitta

Dimsemenov

dimsemenov.com › plugins › magnific-popup

Magnific Popup: Responsive jQuery Lightbox Plugin

Open with fade-zoom animation Open with fade-slide animation · This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed. Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. ... You have full control of what is displayed in popup, align it to any side via CSS, enable or disable scroll on right side of window - whatever.

Team Treehouse

teamtreehouse.com › community › magnific-popup-update-class-on-change-of-image

Magnific Popup: Update class on change of image. (Example) | Treehouse Community

August 31, 2016 - <a href="<?php echo $full_array[0]; ?>" itemprop="contentUrl" data-effect="mfp-zoom-in" data-layout="<?php echo $imageLayout; ?>"> <div class="intrinsic intrinsic--4-3"> <?php if(get_sub_field('custom_thumbnail')): ?> <img src="<?php the_sub_field('custom_thumbnail'); ?>" itemprop="thumbnail" alt=""> <?php else: ?> <img src="<?php echo $default_array[0]; ?>" itemprop="thumbnail" alt=""> <?php endif; ?> </div> </a> ... $('.gallery').magnificPopup({ type: 'image', delegate: 'a', removalDelay: 500, mainClass: 'mfp-with-fade', image: { markup: '<div class="mfp-figure">' + '<div class="mfp-logo"><i

Digital Point

forums.digitalpoint.com › threads › problem-with-magnific-popup-dailog-css-3-animation-effect.2729557

Problem with Magnific Popup Dailog css 3 animation effect

August 11, 2014 - I just found this searching and its too much good for popup effecr http://dimsemenov.com/plugins/magnific-popup/ I tried too much applying the same...

ACTE

acte.in › home › magnific popup: responsive jquery | how to implement magnific popup [ overview ]

Magnific Popup : Responsive jquery | How to Implement Magnific Popup [ OverView ] | Updated 2025

How Magnific Popup jquery Article

Looking to Learn Magnific Popup ▷Review & Expertise ✔️Get support with Hands-on PRO-Tips ⭐Check-out! One of best Institute to learn Magnific Popup jquery from ACTE . Really impressive model where you can learn technical Skills , Soft Skill and get help to kick start your first Job as well.

Rating: 5

GitHub

github.com › dimsemenov › Magnific-Popup › issues › 101

Image and fade · Issue #101 · dimsemenov/Magnific-Popup

May 31, 2013 - I'm trying to add an image popup and use the fade zoom animation like you have set up on your preview, but in this case you are using the dialog type. Is this possible? Here's the code that I'm using: jQuery('.image-popup-no-margins').magnificPopup({ type: 'image', fixedContentPos: false, fixedBgPos: true, closeOnContentClick: true, closeBtnInside: false, mainClass: 'mfp-no-margins mfp-zoom-in', image: { verticalFit: true } }); No one assigned ·

Published May 31, 2013

Author Pirenko

GitHub

github.com › dimsemenov › Magnific-Popup › issues › 1023

Magnific Popup Conflict · Issue #1023 · dimsemenov/Magnific-Popup

September 22, 2017 - But the mobile site does not include the smooth scroll feature. ... // portfolio filter $('.simplefilter li').click(function() { $('.simplefilter li').removeClass('active'); $(this).addClass('active'); }); // portfolio image-popup $(".image-popup").magnificPopup({ type: "image", removalDelay: 300, mainClass: "mfp-fade" });

Author ghost