I can't get magnific-popup animations to work - popup

Question

I've been through the excellent documentation for this and it's great.
http://dimsemenov.com/plugins/magnific-popup/documentation.html
I have the basic pop up working fine.
My problem is with the animations. I just can't get them to work. Apologies if I've missed something very basic but I've spent too long on this now and hope someone can point out my mistake. It currently just appears no fade nothing.
I've played with it on codepen and can recreate the issue by removing the CSS so perhaps this is not getting through correctly, although I know it is linking as it is styling the pop up just not the animations.
Here is my html:
<div id="Column1"><div id="aboutus" >
<div id="pop" >
<img src="/stalkseed/assets/Uploads/aboutus.jpg" name="about-us" border="0" id="about-us"/>
</div>
My JavaScript from the same page:
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('#pop').magnificPopup({
delegate: 'a',
type: 'image',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
// just a hack that adds mfp-anim class to markup
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});});
//]]>
</script>
My CSS
#charset "UTF-8";
/* CSS Document */
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 502;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 503;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
height: 100%;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 505; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #cccccc;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 504; }
.mfp-preloader a {
color: #cccccc; }
.mfp-preloader a:hover {
color: white; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
padding: 0;
z-index: 506; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: white;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
color: white;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #cccccc;
font-size: 12px;
line-height: 18px; }
.mfp-arrow {
position: absolute;
top: 0;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before, .mfp-arrow:after,
.mfp-arrow .mfp-b,
.mfp-arrow .mfp-a {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: solid transparent; }
.mfp-arrow:after,
.mfp-arrow .mfp-a {
opacity: 0.8;
border-top-width: 12px;
border-bottom-width: 12px;
top: 8px; }
.mfp-arrow:before,
.mfp-arrow .mfp-b {
border-top-width: 20px;
border-bottom-width: 20px; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after,
.mfp-arrow-left .mfp-a {
border-right: 12px solid black;
left: 5px; }
.mfp-arrow-left:before,
.mfp-arrow-left .mfp-b {
border-right: 20px solid white; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after,
.mfp-arrow-right .mfp-a {
border-left: 12px solid black;
left: 3px; }
.mfp-arrow-right:before,
.mfp-arrow-right .mfp-b {
border-left: 20px solid white; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: black; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
.mfp-figure {
line-height: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #f3f3f3;
word-break: break-word;
padding-right: 36px; }
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
#media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
/* The shadow behind the image */
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; } }
#media all and (max-width: 800px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }
.mfp-ie7 .mfp-img {
padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
width: 600px;
left: 50%;
margin-left: -300px;
margin-top: 5px;
padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
padding: 0; }
.mfp-ie7 .mfp-content {
padding-top: 44px; }
.mfp-ie7 .mfp-close {
top: 0;
right: 0;
padding-top: 0; }
/*html,body {margin:0; padding:10px; -webkit-backface-visibility:hidden;
background-color: #eee3da;
}*/
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width:auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
&.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: scale(1);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== Newspaper effect ======
*/
.mfp-newspaper {
/* start state */
.mfp-with-anim {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.5s;
transform: scale(0) rotate(500deg);
}
&.mfp-bg {
opacity: 0;
transition: all 0.5s;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: scale(1) rotate(0deg);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: scale(0) rotate(500deg);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== Move-horizontal effect ======
*/
.mfp-move-horizontal {
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.3s;
transform: translateX(-50px);
}
&.mfp-bg {
opacity: 0;
transition: all 0.3s;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: translateX(0);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: translateX(50px);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== Move-from-top effect ======
*/
.mfp-move-from-top {
.mfp-content {
vertical-align:top;
}
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.2s;
transform: translateY(-100px);
}
&.mfp-bg {
opacity: 0;
transition: all 0.2s;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: translateY(0);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: translateY(-50px);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== 3d unfold ======
*/
.mfp-3d-unfold {
.mfp-content {
perspective: 2000px;
}
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.3s ease-in-out;
transform-style: preserve-3d;
transform: rotateY(-60deg);
}
&.mfp-bg {
opacity: 0;
transition: all 0.5s;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: rotateY(0deg);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: rotateY(60deg);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== Zoom-out effect ======
*/
.mfp-zoom-out {
/* start state */
.mfp-with-anim {
opacity: 0;
transition: all 0.3s ease-in-out;
transform: scale(1.3);
}
&.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: scale(1);
}
&.mfp-bg {
opacity: 0.8;
}
}
/* animate out */
&.mfp-removing {
.mfp-with-anim {
transform: scale(1.3);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
}
}
/*
====== "Hinge" close effect ======
*/
#keyframes hinge {
0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); opacity: 0; }
}
.hinge {
animation-duration: 1s;
animation-name: hinge;
}
.mfp-with-fade {
// before-open state
.mfp-content,
&.mfp-bg {
opacity: 0;
transition: opacity .5s ease-out;
}
// open state
&.mfp-ready {
.mfp-content {
opacity: 1;
}
&.mfp-bg {
opacity: 0.8; // background opacity
}
}
// closed state
&.mfp-removing {
&.mfp-bg {
opacity: 0;
}
}
}

Answer 1

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

Answer 2

You can also make great use of animate.css (http://daneden.github.io/animate.css/). Once you initialize the popup make sure you add animate class along with the desired animation class from the library. For example animate fadeIn.

Answer 3

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>

Answer 4

In case anyone interested in the .mfp-move-from-top animation below is the code:
.mfp-move-from-top .mfp-content{
vertical-align:bottom;
}
.mfp-move-from-top .mfp-with-anim{
opacity: 0;
transition: all 0.2s;
transform: translateY(-100px);
}
.mfp-move-from-top.mfp-bg {
opacity: 0;
transition: all 0.2
}
.mfp-move-from-top.mfp-ready .mfp-with-anim {
opacity: 1;
transform: translateY(0);
}
.mfp-move-from-top.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-move-from-top.mfp-removing .mfp-with-anim {
transform: translateY(-50px);
opacity: 0;
}
.mfp-move-from-top.mfp-removing.mfp-bg {
opacity: 0;
}

Answer 5

I had the same problem. found the solution here:
just change
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
to this (adds a space and then the class, in case option is being used):
into
beforeOpen: function() {
this.st.mainClass += ' ' + this.st.el.attr('data-effect');
}