Magnific-popup: Animation on Gallery

[alexranc]

I have a gallery setup with different links pointing to AJAX content. Is there a way to animate so that when you click the next or previous buttons it fades the windows in and out instead of just blinking to the other window.

Thanks

[dimsemenov]

There is no option for animation between gallery items, and likely won't be, sorry. You may open a third party slideshow inside popup.

[isGabe]

There really should be an option for adding some kind of animation between items in a gallery. With fade/zoom set up when the popup loads, jumping from one image to the next instantly just doesn't look right.

[isGabe]

I actually just figured out how to do it. I just added a CSS fade in animation to .mfp-figure, like so:

Declare animation styles:

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

@-o-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

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

%fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .3s;
    -moz-animation-duration: .3s;
    -ms-animation-duration: .3s;
    -o-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

Add it it .mfp-figure:

.mfp-figure{
    @extend %fadeIn;
}

[isGabe]

Pen: http://codepen.io/FStop/pen/tDzLH

[nicmare]

awesome approach FStop! Was looking for some animations between gallery images. Unfortunately your hotfix seems not to work with animation-fill-mode. The animation just appears for the new images fadein. So there is no fadeout before :(

[LucusWebsites]

Just to add my 2 cents: Your solution @FStop causes as flicker when you first open a photo, at least in my case.
I am using a animation when you open a photo as well.

I fixed it by adding this callback:

callbacks: {
    change: function() {
        if (this.isOpen) {
            this.wrap.addClass('mfp-open');
        }
    }
}

And adding .mfp-open in the CSS:

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-o-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

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

.mfp-open .mfp-figure {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -ms-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}

[nimmolo]

@LucusWebsites this works great!

[nicmare]

but it seems the old images will be simply removed and the new one fades in. how about fading out the old one first? or both in between. anybody?

[nimmolo]

@nicmare correct.

you could animate the fade out with jquery but i believe this script purposely avoids jquery transitions, becasue they can be slow in some browsers.

but look around, especially on css-tricks, there may be a way to animate the fade out. I just tried to solve your problem by applying css transitions to the selector .mfp-figure:not(.mfp-open) but it did not work as expected, sorry this answer is not more helpful.

[nicmare]

i already took a look in the source code. the problem is that the script removes the old image. so there is no space for any animations as far as i know!

[nimmolo]

@nicmare i would highly recommend RoyalSlider to handle true slideshow transitions, I've bought it like 10 times. Very worth the money.

You can open it within the magnific-popup, as suggested by Dmitry above.

The CSS fadein softened the transition enough for me, becasue in this case I am just transitioning between information panels. For photos maybe it needs something smoother.

[eskinderg]

@LucusWebsites It workes perfect. Thanks.
One question though,
I found this website that uses Magnific and while i was browsing through the gallery, i noticed that there was a zoom-in and zoom-out transition between the images in the gallery and i think it is possible to use zoom-in and zoom-out animation transition, which i think is very cool to use it in my gallery, and i would appreciate it if someone shows us how.
Thanks.

[zoomtronic]

If you are using the "zoom" effect when your slider open and close, there is a little issue with image restarting fading.

Solution:
Dont forget to remove the 'mfp-open' class before the closing.

beforeClose: function() {
    this.wrap.removeClass('mfp-open');
}

[vtmx]

I like of transition this site: http://www.kriesi.at/themes/enfold/portfolio-item/single-portfolio-23-gallery-3/

JS

    $('#portfolio').magnificPopup({
        delegate: 'a',
        type: 'image',
        tClose: 'Fechar (Esc)',
        tLoading: '',
        gallery:{
            enabled:true,
            tPrev: 'Anterior (Seta esquerda)',
            tNext: 'Próximo (Seta direita',
            tCounter: '%curr% de %total%'
        },
        image: {
            tError: 'A imagem não pode ser carregada.'
        },
        mainClass: 'mfp-zoom-in',
        removalDelay: 300, //delay removal by X to allow out-animation
        callbacks: {
            beforeOpen: function() {
                $('#portfolio a').each(function(){
                    $(this).attr('title', $(this).find('img').attr('alt'));
                }); 
            },
            open: function() {
                //overwrite default prev + next function. Add timeout for css3 crossfade animation
                $.magnificPopup.instance.next = function() {
                    var self = this;
                    self.wrap.removeClass('mfp-image-loaded');
                    setTimeout(function() { $.magnificPopup.proto.next.call(self); }, 120);
                }
                $.magnificPopup.instance.prev = function() {
                    var self = this;
                    self.wrap.removeClass('mfp-image-loaded');
                    setTimeout(function() { $.magnificPopup.proto.prev.call(self); }, 120);
                }
            },
            imageLoadComplete: function() { 
                var self = this;
                setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
            }
        }
     });

CSS

/* =transition */

.mfp-ready .mfp-figure {
  opacity: 0;
}

.mfp-zoom-in {
  /* start state */
  /* animate in */
  /* animate out */
}
.mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler{
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}
.mfp-zoom-in.mfp-bg,
.mfp-zoom-in .mfp-preloader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-image-loaded .mfp-figure, .mfp-zoom-in.mfp-ready .mfp-iframe-holder .mfp-iframe-scaler{
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg,
.mfp-zoom-in.mfp-ready .mfp-preloader {
    opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-figure, .mfp-zoom-in.mfp-removing .mfp-iframe-holder .mfp-iframe-scaler{
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg,
.mfp-zoom-in.mfp-removing .mfp-preloader {
    opacity: 0;
}
.mfp-iframe-scaler{ overflow: visible; /*so the close button is shown*/}
.mfp-zoom-out-cur { cursor: auto; }
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; }

[macsupport]

Using a bit of the above code, here is a codepen showing some opening and prev-next animation options for Magnific-popup using Velocity.js. Excuse the novice coding....

[erezLieberman]

@LucusWebsites - thanks! work great!

[ggwebdev]

Tanks vtmx nice job!

[maxmood]

just read them all , tanks to all, i am learning all those tricks, hope to build more Awesome web apps

[abidCharlotte49er]

We use animate.css for animatio we can slightly alter the UpdateItemHTML function something like this. We are checking direction and setting Slide Left or Right appropriately.

updateItemHTML: function () {
            $(b.contentContainer).find("figure").removeClass("slideInRight slideInLeft")
            var curSwipe = "slideInLeft";
            if (b && b.direction) {
                curSwipe = "slideInRight";
            }
            var c = b.items[b.index];
            $(b.contentContainer).find("figure").addClass(curSwipe);

Thank You

[jk-1984]

We use animate.css for animatio we can slightly alter the UpdateItemHTML function something like this. We are checking direction and setting Slide Left or Right appropriately.

updateItemHTML: function () {
            $(b.contentContainer).find("figure").removeClass("slideInRight slideInLeft")
            var curSwipe = "slideInLeft";
            if (b && b.direction) {
                curSwipe = "slideInRight";
            }
            var c = b.items[b.index];
            $(b.contentContainer).find("figure").addClass(curSwipe);

Thank You

Hi abidCharlotte48er, I am trying to do the same thing as you.

I have a link setup to call magnific popup. then when the Iframe is opened i have it set to animate with animate.css but now how do i get it to animate out before on frame change?

$(document).ready(function() {

    $('.pop-up-video').magnificPopup({
      removalDelay: 500,
      preloader: true,
      gallery:{enabled:true},
      midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
        type:'iframe',
        iframe: {
            markup:  '<div class="mfp-figure">'+
                '<figure>'+
                    '<div class="mfp-header">'+
                        '<div class="mfp-top-bar">'+
                            '<div class="mfp-title"></div>'+
                            '<div class="mfp-close"></div>'+
                            '<div class="mfp-decoration"></div>'+
                        '</div>'+
                    '</div>'+
                    '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-content-container">'+
                        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                    '</div>'+
                    '</div>'+
                    '<div class="mfp-footer">'+
                        '<figcaption class="mfp-figcaption">'+
                            '<div class="mfp-bottom-bar-container">'+
                                '<div class="mfp-bottom-bar">'+
                                    '<div class="mfp-description"></div>'+
                                    '<div class="mfp-decoration"></div>'+
                                '</div>'+
                            '</div>'+
                        '</figcaption>'+
                    '</div>'+
                '</figure>'+
            '</div>',    // HTML markup of popup, `mfp-close` will be replaced by the close button

        patterns: {
          youtube: {
            index: 'youtube.com/',
            id: 'v=',
            src: '//www.youtube.com/embed/%id%?autoplay=1'
          },
          vimeo: {
            index: 'vimeo.com/',
            id: '/',
            src: '//player.vimeo.com/video/%id%?autoplay=1'
          },
          gmaps: {
            index: '//maps.google.',
            src: '%id%&output=embed'
          }
        },
        srcAction: 'iframe_src',

    },

   callbacks: {
    beforeOpen: function() {
       this.st.iframe.markup = this.st.iframe.markup.replace('mfp-figure', 'mfp-figure animated ' + this.st.el.attr('data-effect'));
       this.st.mainClass = this.st.el.attr('data-effect');
    },

   markupParse: function(template, values, item) {
     values.title = item.el.attr('title');

   },


   updateItemHTML: function () {
            $(b.contentContainer).find("figure").removeClass("animated")
            var curSwipe = "slideInLeft";
            if (b && b.direction) {
                curSwipe = "slideInRight";
            }
            var c = b.items[b.index];
            $(b.contentContainer).find("figure").addClass(curSwipe);
    },
  },
 });
});

I just cant get it to work with the code you posted and the code i have.
Thaank you

[abidCharlotte49er]

JK-84, We did this 2 years ago and our requirement was with images no iFrames. Can you set this up somewhere like Jsfiddle and tell me what you are trying to do? It is hard to look and review code. Thanks

[abidCharlotte49er]

If you could set this up on https://jsfiddle.net/ with some sample iFrame content it will be easy for all to review and see if we can suggest something.

[jk-1984]

If you could set this up on https://jsfiddle.net/ with some sample iFrame content it will be easy for all to review and see if we can suggest something.

Thank you for the rely. I am very new to code so just tying to make something up from what i found online. Dont really know if its the right way to do things.

What I would like to do I have the gallery animate in with animate.css like it does now. But when you click the arrows it will just jump to that last animation and show the next video.
What I need it to do is when you click the arrows it will animate out and then the next video will animate in. So I could have ” slideInLeft” “slideOutRight” or whatever I set it to.

Thank you

https://jsfiddle.net/jk1984/vyh73dLc/3/