New to the community? Start here

Hustle Pro pop-up animation issue

I want to change the pop-up animation duration.

Wed, 8 Jan 2020 6:40:03
More Hustle Pro discussions
Hustle Pro
  • Predrag Dubajic
    • Support

    Hi Emilio,

    It seems that the animation times are further affected by a script that is setting the time of the layout background to show and it can’t be affected with CSS code the same way as the popup animation.
    We have forwarded this to our devs to check it out and see if there’s something that could be done via mu-plugin in order to go around this without changing the plugin code files.
    Please note that developer response might be slower than usual staff response, so we appreciate your patience on this.

    Best regards,
    Predrag

  • Alessandro
    • Nightcrawler & Daydreamer

    Hey Emilio!

    I apologize for our late response but we were busy these days. :grin:

    I tried to achieve smooth animations and let you change the duration of them but I came to a dead-end. Current HTML markup do not allow to us to use pure CSS to provide smooth animations. As a results we must use JavaScript to make it work. I wrote a small jQuery-dependent snippet using Hustle’s event listeners API.

    function wpmudev_hustle_popup_mask_animation(){ ?>

<script type="text/javascript">

	(function($){
		
		// Opening Popup
		$( document ).on( 'hustle:module:displayed', function(){ 
			$( '.hustle-popup-mask' ).hide().fadeIn( 1000 );
		});

		// Closing Popup
		$( document ).on( 'hustle:module:closed hustle:module:hidden hustle:module:click_outside hustle:module:esc_key_pressed hustle:module:clicked_never_see', function(){ 
			$( '.hustle-popup-mask' ).fadeOut( 1000 );
		});

	})(jQuery);

</script>

<?php }

add_action( 'wp_footer', 'wpmudev_hustle_popup_mask_animation' );

    :warning: You can change the duration of fadeIn/fadeOut function between 50 – 1000 (milliseconds). Higher delay will add a glitch to fadeOut, as parent element disappears earlier and hides the mask layer before animation is completed.

    More about fading functions you can find on fadeIn and fadeOut of jQuery API documentation.

    Append this code to your theme’s functions.php and it will work.

    Note: We always recommend to append any snippets in your child’s theme functions.php to allow parent themes to be updated without losing your modifications.

    Let us know if this worked for you. :blush:

    Kind regards,
    Alessandro.

  • Alessandro
    • Nightcrawler & Daydreamer

    Hey Emilio!

    I glad you are satisfied by the provided support. :tada:

    In my opinion there is no such a need to add an option for that, as most of pop-ups tend to use same animation timings. It’s a user experience thing! In any case, I ll let the developer know about it. :blush:

    If you are having hard times to implement, let us know to help assist you further, providing an updated code snippet. :nerd:

    Kind regards,
    Alessandro.