Popup Animation
I'm curious if there is a way to add a classes to the short code for popups? I'd like to add an entrance animation for when the popup opens but having a hard time figuring the best way to implement the CSS i have for it.
Thanks!
Comments
Sorry but this is not possible, you would have to modify the popup plugin files directly.
thanks
I faced the same problem - magnific entrance popup is terrible. How you implemented smooth to it?
If it not spare a lot of you time - will be waiting for your answer.
I implemented it HERE, click "Download Report" and you will see the animation in action.
Solid work, good job
Thank you for the reply. I am rather advanced user ) microsoft and intel sertified.
I saw you realization. Nice work. Thank you for the idea. I will try to implement it in my site here: https://goo.gl/3KUJtR in part Photo (where rooms type describing). And that will be a little difference between inline popup and gallery popup entrance... Uff - not much time - I have to finish the whole site till the end of October... That is why looking for the ready implementation.
@WebTechMarketing
At last - decided to make some beauty to Magnific popup animation yesterday. First - wanted to add the new class to shortcode, as WebTechMarketing did, but before that took a look at inner Magnific structure. And... Magnific own has everything to animate itself ) When it starts - the wrap class mfp-ready appears, when closes .mfp-removing wrap is. All the content ( so the additional class does not need to be inserted) - is inside .mfp-content class. A few CSS strings - and the animation is (!)
I did simple - that I needed, but you can add transform - and do what you want. My example here:
https://goo.gl/E1rDeK
These are css strings:
.mfp-bg { opacity: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out;}
/* overlay animate in */
.mfp-bg.mfp-ready { opacity: 0.8; }
/* overlay animate out */
.mfp-bg.mfp-removing { opacity: 0; }
/* content at start */
.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; transition: all 0.25s linear;}
/* content animate in */
.mfp-wrap.mfp-ready .mfp-content { opacity: 1; }
/* content animate out */
.mfp-wrap.mfp-removing .mfp-content { opacity: 0; }
That is all )