Popup Animation

Comments

• Bryan

  September 2017

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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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 edited 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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 )