eleopard

Hi Wearedigiwolf,

Glad to know your resolved it yourselves 🙂
Please feel to let me know if you face any other issues.

Dear Stefanie,

Apologies for the delayed reply.

Regarding your issue, I don;t think it would be possible to make some internal elements stop animation without using some Custom CSS.

e.g. For your current situation. Please add the following CSS to:
Settings > Animate It! > Custom CSS Box

.header-content .et_pb_module_header, .header-content .et_pb_button{
	animation: none
}

Now, add the animation to the header block using the Custom Animation Classes.

This should only make the “BLUE WHALE DIVE” animate, while the upper text and bottom button should remain intact.

Please let me know if this works for you.

Dear jcsusano,

Thanks for using the Animate It!

Please update the script added to footer with the following:

<script>
   (function($){
       var animationClasses = 'animated bounce duration2';
       $(document).ready(function() {
           var animationPairs = [
		   {
               'btnSelector': '.eds-animate-btn-bus-stops',
               'elementSelector': '.eds-animate-icon-bus-stops'
           },
		   {
               'btnSelector': '.eds-animate-btn-supermarkets',
               'elementSelector': '.eds-animate-icon-supermarkets'
           },
		   {
               'btnSelector': '.eds-animate-btn-banks',
               'elementSelector': '.eds-animate-icon-banks'
           },
		   {
               'btnSelector': '.eds-animate-btn-atms',
               'elementSelector': '.eds-animate-icon-atms'
           },
		   {
               'btnSelector': '.eds-animate-btn-schools',
               'elementSelector': '.eds-animate-icon-schools'
           },
		   {
               'btnSelector': '.eds-animate-btn-parks',
               'elementSelector': '.eds-animate-icon-parks'
           }
		   ];
           animationPairs.forEach(function(pair) {
               $("body").on("click", pair.btnSelector, function (e) {
                   e.preventDefault();
                   var $elem = $(pair.elementSelector);
                   if ($elem.length) {
                       if ($elem.hasClass("animated")) {
                           $elem.removeClass(animationClasses);
                       }
                       $elem.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
                           $elem.removeClass(animationClasses);
                       });
                       $elem.addClass(animationClasses);
                   }
               });
           });
       });
   })(jQuery);
</script>

This should accomplish what you are looking for.
I have tested this out on my Dev website here:
https://wp5.wpdevcloud.com/post-for-jcsusano/

Please let me know if this works for you.

Dear Lecongdanh,

Thanks for using the Animate It!
Are you using the Classic WordPress editor, or the new Gutenberg editor?

Needful done, thank you for pointing it out.

Scratch the previous codes, and do the following.

1. Add class eds-animate-form on any hyperlink, button etc, that you wish on clicking, should animate the form.

2. Paste the following code in “Scripts in footer” section of the Plugin:

<script>
	(function($){
		var animationClasses = 'animated shake duration2';
		$(document).ready(function() {
			$("body").on("click", ".eds-animate-form", function(e) {
				e.preventDefault();
				var $form = $("#wpforms-6418");
				if($form.length) {
					if($form.hasClass("animated")) {
						$form.removeClass(animationClasses);    
					}                                
					$form.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {    
						$form.removeClass(animationClasses);    
					});
					$form.addClass(animationClasses);
				}
			});
		});
	})(jQuery);
</script>

Now any link/button with class eds-animate-form will make the form shake.

Dear Callanwp,

Thanks for using the Animate It!

The setup you wish can be achieved by using the custom scripts.

Please follow the below steps:
1. Install and activate the “Insert Headers and Footers” plugin
https://wordpress.org/plugins/insert-headers-and-footers/

2. Insert the following code in the “Scripts in footer” section of the Plugin
https://ps.w.org/insert-headers-and-footers/assets/screenshot-1.png

<script>
	(function($){
		var animationClasses = 'animated shake duration2';
		$(document).ready(function() {
			$("body").on("click", ".maxbutton-27", function(e) {
				e.preventDefault();
				var $form = $("#wpforms-6418");
				if($form.length) {
					if($form.hasClass("animated")) {
						$form.removeClass(animationClasses);    
					}                                
					$form.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {    
						$form.removeClass(animationClasses);    
					});
					$form.addClass(animationClasses);
				}
			});
		});
	})(jQuery);
</script>

_________________________________________________

You can change the animations by generating them from Animate it Classes generator:https://www.downloads.eleopard.in/class-generator-wordpress

Please note that the button click is defined using the unique button class “maxbutton-27” and animation is applied using the unique Contact form ID “wpforms-6418”

You would need to change these if you are applying animation to some other set of button and form.

Please let me know if this works for you