Popup Animation

WebTechMarketing · September 2017

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!

Bryan · September 2017

Hi,
Sorry but this is not possible, you would have to modify the popup plugin files directly.
thanks

WebTechMarketing · September 2017

Could you tell me which files contain the appropriate code?

WebTechMarketing · September 2017

I figured it out and implemented my animation, thanks!

dino127 · October 2017

hey, WebTechMarketing!
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.

WebTechMarketing · October 2017

I would do this only if you are an advanced user. Always make a backup of files you wish to edit.

I added my own class to the popup shortcode code located in theme-shortcodes.php within the theme template files. I then added CSS that creates the animation to that class and done.

I implemented it HERE, click "Download Report" and you will see the animation in action.

Bryan · October 2017

WebTechMarketing
Solid work, good job

dino127 · October 2017

WebTechMarketing
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.

dino127 · October 2017

@Muffin Support
@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 )

Popup Animation

Comments